A tooltip built from the aria-label attribute. Shows
on hover and on keyboard focus.
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/tooltip.css" />Default
Add data-tooltip and aria-label to any
element. The label is the tooltip text.
<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>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Placement | [data-tooltip="top"][data-tooltip="bottom"][data-tooltip="left"][data-tooltip="right"] |
Side the tooltip shows on. Defaults to top |