Tooltip
v0.2.0Names a control on hover and on keyboard focus, built on [`@radix-ui/react-tooltip`](https://www.radix-ui.com/primitives/docs/components/tooltip).
Names a control on hover and on keyboard focus, built on
@radix-ui/react-tooltip.
Intended for icon-only controls, where the tooltip is the only thing naming the
control. It replaces the title attribute, which delays about a second, is
OS-styled with no theming, has no touch support, and gives no control over
placement.
Usage
The child is rendered as-is via Radix's asChild, so the trigger stays your own
element. Tooltip mounts its own provider — you do not need to add one.
Disabled triggers
A disabled element fires no pointer events, so a bare Radix tooltip never opens on one. That is the moment a tooltip matters most: when a control is unavailable and the user wants to know why.
Tooltip handles it. When the child is disabled it is wrapped in a focusable
span that carries the listeners, and the child is made pointer-transparent so
hover lands on the wrapper. The control stays disabled, keeps its own accessible
name, and the explanation is reachable by keyboard and screen reader.
No wrapper is added when the trigger is enabled.
Compositions
Open all 3 →Properties
Tooltip props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactElement<unknown, string | JSXElementConstructor<any>> | — | The element the tooltip describes — rendered as-is via Radix's `asChild` |
label* | string | — | Text shown in the tooltip. This is the control's name when the trigger is icon-only. |
className | string | — | Additional class names to merge with the tooltip content element |
side | "top" | "right" | "bottom" | "left" | top | Which side of the trigger to place the tooltip on; defaults to "top" |