Tooltip

delayDuration

number

The duration from when the mouse enters a tooltip trigger until the tooltip opens.

skipDelayDuration

number

How much time a user has to enter another trigger without incurring a delay again.

disableHoverableContent

boolean

Prevents TooltipContent from remaining open when hovering. Disabling this has accessibility consequences.

defaultOpen

boolean

The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.

onOpenChange

function (open: boolean) => void

Event handler called when the open state of the tooltip changes.

delayDuration

number

Override the duration given to the Provider to customise the open delay for a specific tooltip.

disableHoverableContent

boolean

Prevents TooltipContent from remaining open when hovering. Disabling this has accessibility consequences. Inherits from TooltipProvider.

asChild

boolean

Change the default rendered element for the one passed as a child, merging their props and behavior.

aria-label

string

By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.

onEscapeKeyDown

function (event: KeyboardEvent) => void

Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

onPointerDownOutside

function (event: PointerDownOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.

side

enum ("top" | "right" | "bottom" | "left")

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

sideOffset

number

The distance in pixels from the trigger.

align

enum ("start" | "center" | "end")

The preferred alignment against the trigger. May change when collisions occur.

alignOffset

number

An offset in pixels from the "start" or "end" alignment options.

avoidCollisions

boolean

When true, overrides the side andalign preferences to prevent collisions with boundary edges.

collisionBoundary

Boundary Element | null | Array<Element | null>

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Padding

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object. Example: { top: 20, left: 20 }.

sticky

enum ("partial" | "always")

The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.