When to use it

Use Tooltip when a UI element needs a short explanatory label that should not take up permanent space. It works well for icon-only buttons in toolbars, truncated text that needs a full-length preview, and any affordance where the label would be redundant for most visitors but helpful on hover or keyboard focus.

If the hint needs interactive content (links, buttons, form fields), use Popover instead. Tooltips are display-only and dismiss on mouse leave.

Slot strategy

Tooltip has three parts plus a shared provider:

• TooltipProvider sets the delay and skip behavior for all tooltips in its subtree. Place it once near the top of a page or section rather than wrapping each tooltip individually.
• Tooltip is the root for a single trigger-content pair.
• TooltipTrigger is the element that activates the hint. Use asChild to avoid adding a wrapper span.
• TooltipContent is the floating label. It includes a built-in arrow and positions itself automatically.

Behavior and theming guidance

The tooltip renders with the primary background color and a small arrow pointing at the trigger. The sideOffset default is 4px, which keeps the tooltip close without overlapping.

Use delayDuration on the provider to control the hover delay. The SDK default is 0ms (instant), but a small delay like 200ms feels more natural for action bars where accidental hovers are common.

Tooltips animate in with a combined fade and zoom transition. The slide direction matches the side prop: a bottom-side tooltip slides in from the top, and so on. Radix handles collision avoidance, so the tooltip repositions automatically near viewport edges.