Tooltip
stableclientradix tooltip
Supplementary text on hover or focus. Never appears on touch and never takes focus — so nothing essential can live here.
On an icon button
<TooltipProvider> {/* once, at the app root */}
<Tooltip content="Dismiss this alert">
<IconButton label="Dismiss"><IconX /></IconButton>
</Tooltip>
</TooltipProvider>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content* | ReactNode | — | The supplementary text. Keep it to a line. |
| side | "top" | "right" | "bottom" | "left" | "top" | Preferred side. |
Guidance
Do
- Wrap the app once in TooltipProvider so tooltips share open/close timing.
Don't
- Don't put essential information in a tooltip — it's invisible on touch.
- Don't use one to label an icon button; that's what the label prop is for.
Accessibility
Opens on focus as well as hover, so keyboard users get it too.
Not a replacement for an accessible name. IconButton's label is still required.