Tooltip
Floating label that appears on hover or focus. Multiple anchor options.
Example
Top tooltip
Rich tooltip
Tooltips support structured content.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
content | ReactNode | — | Required | Tooltip content |
anchor | Anchor | 'top' | No | Position and alignment relative to trigger (e.g. top-center) |
open | boolean | — | No | Controlled open state |
maxWidth | string | — | No | Overrides the default max-width (CSS value, e.g. "256px") |
onOpenChange | (open: boolean) => void | — | No | Called when open state changes |
Accessibility
- role="tooltip" with unique ID
- Trigger gets aria-describedby pointing to tooltip
- Shows on focus and hover, hides on Escape
Related Tokens
--tooltip-surface--tooltip-on-surface--tooltip-border