| Variable | property | value | desc. |
|---|---|---|---|
| $tooltip-arrow-size | size | rem(5px) |
tooltip arrow size |
| $tooltip-bg | background-color | rgba($black, .8) |
tooltip background-color |
| $tooltip-color | color | $white |
tooltip color |
| $tooltip-space-between-content | size | $mg--xs |
space between tooltip and content |
| $tooltip-width | width | 10rem |
tooltip width |
| $tooltip-large-width | width | 20rem |
large tooltip width |
| $tooltip-pd | padding | $pd--s |
tooltip padding |
Default tooltip
<p>Default <strong class="has-tooltip" aria-label="Classic tooltip">tooltip</strong></p>Tooltip on the top
<p>Tooltip <strong class="has-tooltip has-tooltip--top" aria-label="Tooltip on the top">on the top</strong></p>Tooltip on the right
<p>Tooltip <strong class="has-tooltip has-tooltip--right" aria-label="Tooltip on the right">on the right</strong></p>Tooltip on the bottom
<p>Tooltip <strong class="has-tooltip has-tooltip--bottom" aria-label="Tooltip on the bottom">on the bottom</strong></p>Tooltip on the left
<p>Tooltip <strong class="has-tooltip" aria-label="Tooltip on the left">on the left</strong></p>Bigger tooltip
<p>Bigger <strong class="has-tooltip has-tooltip--l has-tooltip--right" aria-label="Bigger tooltip for longer text, you know. Because longer text are more significants, because they contains more words, because they're more significants">tooltip</strong></p>