ds
Components
Tooltip

Tooltip

CSS-only hints for icon buttons.

Code

<button class="btn icon" aria-label="Zoom in" data-tip="Zoom in (+)">…</button>
<button class="btn icon" aria-label="Full screen" data-tip="Full screen (F)" data-tip-pos="bottom">…</button>

CSS only: the text comes from data-tip and shows on hover and keyboard focus after a short delay. It is for short labels on icon buttons, with the shortcut in brackets. Anything longer belongs in the page.

Attribute	On	What it does
`data-tip`	any	Tooltip text, above the element.
`data-tip-pos="bottom"`	[data-tip]	Show it below instead.

Accessibility

The tooltip is visual only. The accessible name still comes from aria-label, so keep them the same or close.
Parents with overflow: hidden clip it; use title there instead.