CSS tooltip.
@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: 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;
}
}
}
}