Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

<button class="btn-outline" data-tooltip="Add to library">Hover</button>

Usage

On any element, set the value of the data-tooltip attribute to the text you want to display in the tooltip. Additionally, you can set:

data-side attribute to top, bottom, left, or right to change the side of the tooltip.
data-align attribute to start, center, or end to change the alignment of the tooltip.

<button class="btn-outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom left</button>

<button class="btn-outline" data-tooltip="Default tooltip">Default</button>

<button class="btn-outline" data-tooltip="Right side tooltip" data-side="right">Right</button>

<button class="btn-outline" data-tooltip="Bottom side and start aligned tooltip" data-side="bottom" data-align="start">Bottom + Start</button>