64Tooltip
Supplementary hover/focus text in the mono label voice. It may never carry a control's only name — hover-only content is unreachable by touch. No visible label means the control needs aria-label, not a tooltip.
Use it for
- A detail on top of a visible label ("Saved 2 min ago")
Not for
- The only label of an icon button
Hover or focus the button
2 minutes ago
markup
<span class="ns-tooltip-host">
<button class="ns-btn ns-btn--outline ns-btn--sm" aria-describedby="tt-1">Saved</button>
<span class="ns-tooltip" id="tt-1" role="tooltip" style="inset-block-start:calc(100% + 6px)">2 minutes ago</span>
</span>Accessibility contract
- Shows on focus-within as well as hover — keyboard users never hover
- aria-describedby links it to the trigger