Tooltip
Use the tooltip class to create a tooltip. It shows the content when the trigger is hovered or focused after a delay.
<div class="tooltip">
<button class="btn-icon tooltip-trigger">Hover me</button>
<div class="tooltip-content">This is a tooltip</div>
</div>This is a tooltip
Use the top class to position the tooltip above the trigger.
<div class="tooltip">
<button class="btn-icon tooltip-trigger">Hover me</button>
<div class="tooltip-content top">This is a tooltip</div>
</div>This is a tooltip
Accessibility
For proper accessibility, the tooltip should be associated with the trigger using the aria-describedby attribute.
<div class="tooltip">
<button class="btn-icon tooltip-trigger" aria-describedby="tooltip-content">Hover me</button>
<div class="tooltip-content" id="tooltip-content">This is a tooltip</div>
</div>This is a tooltip