Tooltip
Accessible React tooltip built on Radix that shows on hover and focus, with a HelpIcon trigger, a title and icon variant, and an inverted surface. RTL ready.
Wrap the trigger with TooltipTrigger asChild and put the message in TooltipContent. HelpIcon bundles a ready-made "?" trigger.
When to use
Use Tooltip for a short hint that clarifies an icon button or a field label, such as what a reference number means. Use HelpIcon next to form labels for a ready-made "?" trigger.
Do not put essential instructions in a tooltip; they are hidden by default and unavailable on touch. Use helperText on the field instead.
Examples
Props
Props declared by Tooltip. Native attributes of the underlying element pass through.
<Tooltip>
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ||
open | boolean | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
delayDuration | number | 700 | The duration from when the pointer enters the trigger until the tooltip gets opened. This will override the prop with the same name passed to Provider. |
disableHoverableContent | boolean | false | When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger. |
<TooltipTrigger>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean |
<TooltipContent>
| Prop | Type | Default | Description |
|---|---|---|---|
inverted | boolean | Dark surface (gray-800) instead of the default light card. Mirrors SDGA Inverted. | |
title | react.ReactNode | Bold heading shown above the body text. | |
icon | react.ReactNode | Leading help badge: true renders the SDGA "?" help-circle, or pass your own node. | |
arrow | boolean | Show the beak pointing at the trigger. Defaults to true. | |
side | "top" | "right" | "bottom" | "left" | ||
sideOffset | number | ||
align | "center" | "start" | "end" | ||
alignOffset | number | ||
arrowPadding | number | ||
avoidCollisions | boolean | ||
collisionBoundary | Element | Element[] | ||
collisionPadding | number | Partial<Record<"top" | "right" | "bottom" | "left", number>> | ||
sticky | "always" | "partial" | ||
hideWhenDetached | boolean | ||
updatePositionStrategy | "always" | "optimized" | ||
forceMount | true | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | |
aria-label | string | A more descriptive label for accessibility purpose | |
onEscapeKeyDown | (event: KeyboardEvent) => void | Event handler called when the escape key is down. Can be prevented. | |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | Event handler called when the a pointerdown event happens outside of the Tooltip.
Can be prevented. |
Accessibility
The tooltip opens on hover and on keyboard focus, and Escape closes it. Radix associates the content with the trigger, so screen readers read the hint when the trigger is focused.
The trigger must itself be focusable, so wrap a button or link with TooltipTrigger asChild. Keep the text short; tooltips are not for paragraphs.