Overlays
Tooltip
A short hint that appears on hover and keyboard focus.
Live example
Prices include taxes and feesShown below the trigger
Usage
<Tooltip content="Sorted newest first">
<button type="button">Sort</button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | none | Short text with no interactive content. |
children | ReactElement | none | One focusable trigger element. |
kind? | 'description' | 'label' | 'description' | description adds aria-describedby; label is for icon buttons. |
placement? | 'top' | 'bottom' | 'top' | Side of the trigger. |
delay? | number | 300 | Hover delay in ms. Focus shows at once. |
Do and don't
Do
- Keep it to a few words.
- Use it to explain an icon or a truncated value.
Don't
- Put links or buttons inside a tooltip; use Popover.
- Hide essential information in a tooltip.
Accessibility
- role tooltip, referenced from the trigger with aria-describedby.
- Dismissible with Escape and stays open while the pointer is over it (WCAG 1.4.13).
Keyboard
| Keys | Action |
|---|---|
| Tab | Focusing the trigger shows the tooltip |
| Escape | Hides it |