Tooltip

Tooltip is a compound component for lightweight floating descriptions attached to a trigger.

Root Props

Prop	Type	Default
`delayOpen`	`number`	`500`
Delay (in milliseconds) before the tooltip appears on hover. It shows at once on keyboard focus, and right after another tooltip closes.
`delayClose`	`number`	`0`
Delay (in milliseconds) before the tooltip disappears after blur/unhover.
`open`	`boolean`	—
Controls the open state of the tooltip. When set, the component becomes controlled.
`defaultOpen`	`boolean`	`false`
Initial open state for uncontrolled usage.
`onChangeOpen`	`(state: boolean) => void`	—
Callback fired when the open state changes.

Also accepts all <div> attributes.

Child Parts

`TooltipTrigger`

The element the tooltip describes. It shows the tooltip on hover with a mouse or pen and on keyboard focus (:focus-visible), never on a tap, and hides it when the trigger is pressed, on pointer leave, on blur, and on Escape. While the tooltip is open, the trigger points to it through aria-describedby.

Prop	Type	Default
`asChild`	`boolean`	—
If true, renders the trigger as a slotted child element using `asChild`. Enables integration with custom elements (e.g., `<a>`, `<div>`, icon buttons) that serve as tooltip triggers.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the underlying button or slotted element. Useful for focus control, programmatic access, or accessibility enhancements.

Also accepts all <button> attributes.

`TooltipContent`

The role="tooltip" surface. It renders in the top layer with popover="manual" when the browser supports it, so a modal dialog or an overflow container does not clip or cover it. It lets the pointer through to the page (pointer-events: none) and grows out of its arrow.

Prop	Type	Default
`ref`	`Ref<HTMLDivElement>`	—
Ref forwarded to the tooltip content element. Useful for positioning, measuring, or managing focus.

Also accepts all <div> attributes.

`TooltipArrow`

Optional arrow pointing back to the trigger.

Also accepts ref and all <svg> attributes.

Types

TooltipProps
TooltipTriggerProps
TooltipContentProps
TooltipArrowProps

State Model

Open state can be controlled with open and onChangeOpen, or uncontrolled with defaultOpen.
Trigger and content are coordinated by the root.
delayOpen applies to hover only. On keyboard focus, and right after another tooltip closes, the tooltip shows without a delay.
useTooltipContext is available for advanced wrappers and timing helpers. It no longer exposes the floating-ui props.
Tooltip timing should stay in service of supplemental information, not product-critical instructions.