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 |
Tokens
CSS custom properties zyra-tooltip reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-tooltip-bg | tuned per theme | Fill color of the tooltip bubble and its directional arrow. |
Text--zyra-color-tooltip-text | tuned per theme | Text color inside the tooltip. |
Border--zyra-color-tooltip-border | tuned per theme | Border color of the tooltip bubble. |
Shadow--zyra-tooltip-shadow | tuned per theme | Drop shadow behind 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