Tooltip (.tooltip)
TIP: Use .tooltip-padding wrapper inside of .tooltip for consistent padding across tooltips.
Syntax
<div class="u-positionRelativeContainer">
<div class="tooltip">
<div class="tooltip-padding">
...
</div>
</div>
</div>
Modifiers
| Modifier (.tooltip) | Behavior |
|---|---|
| .tooltip--fromLeft | Tooltip position on left. |
| .tooltip--fromRight | Tooltip position on right. |
| .tooltip--fromTop | Tooltip position on top. |
| .tooltip--fromBottom | Tooltip position on bottom. |
| .tooltip--alignLeft (use only with fromTop, fromBottom) | Aligns tooltip to left. |
| .tooltip--alignMiddle (use only with fromTop, fromBottom) | Aligns tooltip to middle. |
| .tooltip--alignRight (use only with fromTop, fromBottom) | Aligns tooltip to right. |
| .tooptip--wrap | Allows wraping of content. |