Hover Tooltip Mixin

_tooltip.scss

/*
 * $direction: top or bottom
 *
 */

@mixin tooltip($content: attr(data-tooltip), $direction: top) {
  position: relative;
  &:before, &:after {
    display: none;
    z-index: 98;
  }
  &:hover {
    &:after { // for text bubble
      content: $content;
      display: block;
      position: absolute;
      height: 22px;
      padding: 6px;
      font-size: 12px;
      white-space: nowrap;
      color: #fff;
      @include text-shadow(1px 1px #000);
      background-color: #222;
    }
    @if ($direction == 'top'){
      &:before {
        @include triangle(down, 6px, #222);
        top: -6px; margin-top: 0;
        left: 47%;
      }
      &:after {
        top: -28px;
        left: 47%; margin-left: -20px;
      }
    }
    @else if ($direction == 'bottom'){
      &:before {
        @include triangle(up, 6px, #222);
        top: auto; margin-top: 0;
        bottom: -6px;
        left: 47%;
      }
      &:after {
        bottom: -28px;
        left: 47%; margin-left: -20px;
      }
    }
  }
}