Tooltip
Show a tooltip using the aria-label attribute. Appears
on hover and on keyboard focus.
Default
Add data-tooltip and aria-label to any
element. The tooltip appears on hover and keyboard focus.
<button data-tooltip aria-label="Add to library">Hover or focus</button>
Placement
Set data-tooltip to top,
bottom, left, or right to
control which side the tooltip appears on. Defaults to
top.
<button aria-label="Top" data-tooltip="top">Top</button>
<button aria-label="Bottom" data-tooltip="bottom">Bottom</button>
<button aria-label="Left" data-tooltip="left">Left</button>
<button aria-label="Right" data-tooltip="right">Right</button>