Interface TooltipProps

interface TooltipProps {
    align?: Align;
    alignOffset?: number;
    arrow?: boolean;
    avoidCollisions?: boolean;
    children: ReactElement;
    className?: string;
    content: ReactNode;
    defaultOpen?: boolean;
    delayDuration?: number;
    onOpenChange?: (open: boolean) => void;
    open?: boolean;
    side?: Side;
    sideOffset?: number;
}

Properties

align?: Align

Alignment along the chosen side. Default: "center".

alignOffset?: number

Offset in pixels from the align edge. Default: 0.

arrow?: boolean

When true, renders an arrow pointing at the trigger. Default: true.

avoidCollisions?: boolean

When true, the tooltip will not flip to the opposite side on collision. Default: true (collisions are avoided).

children: ReactElement

The element that triggers the tooltip on hover/focus. Must be a single React element that can receive a ref and event handlers (a DOM element or a component using forwardRef).

className?: string

Additional class name applied to the tooltip content.

content: ReactNode

The content to render inside the tooltip.

defaultOpen?: boolean

Initial open state for the uncontrolled mode.

delayDuration?: number

The duration from when the pointer enters the trigger until the tooltip opens. Overrides the provider's delayDuration for this tooltip only.

onOpenChange?: (open: boolean) => void

Called when the open state changes.

open?: boolean

Controlled open state. If omitted, the tooltip is uncontrolled.

side?: Side

Preferred side of the trigger to render the tooltip against. Will be flipped automatically on collision unless avoidCollisions is false. Default: "top".

sideOffset?: number

Distance in pixels between the trigger and the tooltip. Default: 6.