@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