@mixin hui_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: 12px 
    // (makes total height including padding 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