Tooltip
Helpful hover and focus details for dense controls, icon actions, and space-constrained interfaces.
API
All inputs and configuration options for zyra-tooltip.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Tooltip label text |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred placement relative to the trigger |
maxWidth | string | '200px' | CSS max-width of the tooltip bubble |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Tooltip is linked to its trigger via aria-describedby for screen reader announcement
- Tooltip renders with role="tooltip" — the trigger element must be focusable
- Tooltip is shown on both hover and focus so keyboard users get the same information
- Never put interactive content inside a tooltip