Tooltip
A floating label that appears when hovering over an element to provide additional context or information.
Basic
A tooltip opens when its trigger is hovered or focused. Icon-only buttons need an aria-label as well; the tooltip does not name the button. Every Tooltip needs a TooltipProvider above it; render one near the root of the app.
Positions
Set side to choose the preferred side of the trigger. The tooltip flips when there is no room.
Delay
TooltipProvider sets the delay for every tooltip inside it. delayDuration is the wait before a tooltip opens, 300ms by default. skipDelayDuration is how long after one tooltip closes the next one opens at once, 500ms by default. This preview nests a provider with a longer delayDuration: the first tooltip in the toolbar waits 900ms, then moving to a neighbor opens it at once. One provider at the app root is usually enough.
Disabled
Set disabled to keep the tooltip from opening, for example when a label is fully visible and needs no tooltip.
Arrow
Set showArrow to point the tooltip at its trigger. Tooltips have no arrow by default.
Underline
Set underline to mark a term in running text with a dotted underline. Add focusableTrigger so keyboard and screen reader users can reach a trigger that isn't focusable on its own.
Your visibility score went up this week.
Rich content
content accepts any node. Build data tooltips from TooltipLayout.Header, TooltipLayout.Body and TooltipLayout.Row, as chart tooltips do in the product.
Properties
The content to display in the tooltip
The element that triggers the tooltip
Props for the Radix tooltip content. className applies to the tooltip surface
Props for the Radix tooltip root, such as open and onOpenChange
Preferred side of the trigger to render against
Default: top
Whether the tooltip is disabled
Default: false
Whether to show an arrow pointing to the trigger element
Default: false
Whether to show a dotted underline beneath the trigger text
Default: false
Makes the trigger keyboard-focusable and adds a focus outline, for triggers such as plain text
Default: false
TooltipProvider
Milliseconds before a tooltip opens on hover
Default: 300
Milliseconds after a tooltip closes during which the next tooltip opens without a delay
Default: 500
The tooltips that share these settings