overlaysstable

Tooltip

Contextual labels with managed delay, positioning, and accessibility.

Placement

Options

Usage

Import the component and configure it with the same props used in the playground.

Common patterns and practical usage examples.

Contextual label for a trigger.

Alternative tooltip placement.

Disabled tooltip behavior.

Omits the arrow when a simpler bubble is preferred.

Props available for the React Tooltip.

21 props

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Compound tooltip children.
`open`	`boolean`	-	Controlled open state.
`defaultOpen`	`boolean`	-	Initial uncontrolled open state.
`onOpenChange`	`((open: boolean) => void)`	-	Called when the open state changes.
`delay`	`number \| Partial<import("@vellira-ui/types").TooltipDelay>`	-	Open delay in milliseconds, or explicit open/close delays.
`skipDelay`	`number`	-	Delay window for future sibling tooltip delay skipping.
`offset`	`number`	-	Distance between trigger and content in pixels.
`interactive`	`boolean`	-	Allows pointer interaction inside tooltip content.
`portal`	`boolean`	-	Reserved for automatic portal rendering in higher-level helpers.
`avoidCollisions`	`boolean`	-	Allows the tooltip to flip or shift to stay visible.
`matchTriggerWidth`	`boolean`	-	Matches tooltip content width to the trigger width.
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'right' \| 'right-start' \| 'right-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end'`	`'top'`	Preferred placement for tooltip content relative to the trigger.
`disabled`	`boolean`	`false`	Disables tooltip interaction and prevents it from opening.

Prop	Type	Default	Description
`asChild`	`boolean`	-	Composes trigger behavior onto a single child element.
`children`Required	`ReactNode`	-	Trigger content.
`disabled`	`boolean`	`false`	Disables tooltip interaction for this trigger.

Prop	Type	Default	Description
`children`Required	`ReactNode`	-	Tooltip content shown while open.
`forceMount`	`boolean`	-	Keeps tooltip content mounted when closed.
`withArrow`	`boolean`	-	Renders a small arrow pointing at the trigger.
`className`	`string`	-	Class name applied to the tooltip content element.
`style`	`CSSProperties`	-	Inline style applied to the tooltip content element.