Tooltip
Contextual label shown on hover or focus
Category: overlay · WCAG 2.2-AA · overlay, hint, popover
States
- hidden
- visible
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | — | The tooltip content shown on hover/focus. |
placement | 'top' | 'right' | 'bottom' | 'left' | top | Side of the trigger the tip opens on: `top`, `right`, `bottom` or `left`. |
children | ReactElement | — | Content rendered inside the component. |
delay | number | 200 | Milliseconds to wait before showing |
Design tokens
--cascivo-color-text--cascivo-color-text-on-accent--cascivo-radius-sm--cascivo-z-tooltip
When to use
- Labeling an icon-only control or clarifying a terse element on hover or focus
- Showing brief, supplementary text that is non-essential to completing the task
- Progressive disclosure of a short hint anchored to a trigger element
When not to use
- The content is interactive (links, buttons, inputs) — use Popover
- Richer non-interactive preview content is needed — use HoverCard
- The information is essential and must always be visible — render it inline instead
How to build an accessible Tooltip in React →
Examples
Basic
<Tooltip content="Copy to clipboard"><Button>Copy</Button></Tooltip>