Tooltip
Hover/focus popover label, dismissible with Escape, WCAG 1.4.13-compliant.
Preview
On a ghost button
Tooltips invert per theme
<span class="nx-tooltip"><button class="nx-btn nx-btn--ghost nx-btn--sm" tabindex="0" aria-describedby="tt-demo">Hover for tooltip</button><span class="nx-tooltip__pop" role="tooltip" id="tt-demo">Tooltips invert per theme</span></span><NxTooltip label="Tooltips invert per theme">
<NxButton variant="ghost" className="nx-btn--sm">Hover for tooltip</NxButton>
</NxTooltip>API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | ReactNode | — | Required | The tooltip's text content. |
Classes
| Class | Description |
|---|---|
.nx-tooltip | Positioning wrapper |
.nx-tooltip__pop | Popover: ink bg, paper text, hoverable + wraps (SC 1.4.13) |
Accessibility
- Shows on both hover AND focus, stays hoverable (pointer-events:auto) so users can move into it, and is dismissible with Escape without losing the trigger's focus (WCAG 2.2 SC 1.4.13).
- The trigger gets exactly one tab stop (NxTooltip clones the child's tabIndex, doesn't add a second) + aria-describedby pointing at the tooltip's id.
Do / Don’t
- Do: Keep the tooltip text short and non-essential (never the only way to reach required info).Don’t: Don't rely on hover alone — the same content must be reachable via keyboard focus.