ComponentsSpec
Tooltip
A two-word label on hover or focus, after a 300ms intent delay. Ink pill, mono 12.
Download
Font family Redaction 35
Show code
<span class="tip"><button class="btn btn-ghost btn-icon" aria-label="Download" aria-describedby="tt-1"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button><span role="tooltip" id="tt-1">Download</span></span>
<span class="tip"><button class="btn btn-ghost" aria-describedby="tt-2">Hover me</button><span role="tooltip" id="tt-2">Font family <span class="mut">Redaction 35</span></span></span>Shows on :hover and :focus-within, so keyboard users get it too. Never put anything essential or interactive in a tooltip - touch has no hover.