Overlay
Tooltip
A small label that appears on hover or focus. Screen readers tie it to the element it describes.
ReactVueWeb Components
View in Storybook Playground
Examples
<Tooltip content="Delete"><button aria-label="Delete">🗑</button></Tooltip>Props
| Name | Type | Default | Description |
|---|---|---|---|
content required | ReactNode | — | The tooltip text. |
children required | ReactElement<{ 'aria-describedby'?: string; onMouseEnter?: (e: React.MouseEvent) => void; onMouseLeave?: (e: React.MouseEvent) => void; onFocus?: (e: React.FocusEvent) => void; onBlur?: (e: React.FocusEvent) => void; }> | — | The trigger element. It receives `aria-describedby` and hover/focus handlers; it must be a focusable element for keyboard accessibility. |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.