.tip {
position: relative; border-bottom: 1px dotted lighten($body-text-color, 10%);
}
.tip::after {
position: absolute; z-index: $tooltip-z-index; display: none; padding: 5px 8px; font: normal normal ($body-font-size * .75) $sans-serif-font-stack; line-height: $base-line-height; color: $tooltip-text-color; text-align: center; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-wrap: break-word; white-space: pre; pointer-events: none; content: attr(aria-label); background-color: $tooltip-bg-color; border-radius: 3px; opacity: 0; -webkit-font-smoothing: subpixel-antialiased;
}
.tip::before {
position: absolute; z-index: ($tooltip-z-index + 1); display: none; width: 0; height: 0; color: $tooltip-bg-color; pointer-events: none; content: ""; border: 5px solid transparent; opacity: 0;
}
@keyframes tooltip-fade {
from { opacity: 0; } to { opacity: 1; }
}
.tip:hover, .tip:active, .tip:focus {
&::before, &::after { display: inline-block; text-decoration: none; animation-name: tooltip-fade; animation-duration: $tooltip-duration; animation-timing-function: ease-in; animation-delay: $tooltip-delay; animation-fill-mode: forwards; }
}
.tip-bottom {
&::after { top: 100%; right: 50%; margin-top: 5px; } &::before { top: auto; right: 50%; bottom: -5px; margin-right: -5px; border-bottom-color: $tooltip-bg-color; }
}
.tip-top {
&::after { right: 50%; bottom: 100%; margin-bottom: 5px; } &::before { top: -5px; right: 50%; bottom: auto; margin-right: -5px; border-top-color: $tooltip-bg-color; }
}
.tip-bottom::after, .tip-top::after {
transform: translateX(50%);
}
.tip-left {
&::after { right: 100%; bottom: 50%; margin-right: 5px; transform: translateY(50%); } &::before { top: 50%; bottom: 50%; left: -5px; margin-top: -5px; border-left-color: $tooltip-bg-color; }
}
.tip-right {
&::after { bottom: 50%; left: 100%; margin-left: 5px; transform: translateY(50%); } &::before { top: 50%; right: -5px; bottom: 50%; margin-top: -5px; border-right-color: $tooltip-bg-color; }
}