Explorer

Tooltip

Accessible tooltip with auto-positioning and delay.

Componentsdocsbase-ui/tooltip↗

Installation

pnpm dlx edbn-ui@latest add tooltip

Manual

Create a file and paste the following code into it.

API Reference

Provider

Provides shared delay settings for tooltips and instant-open grouping. Doesn't render its own HTML element.

delaynumber

=600

Shared delay before opening a tooltip in milliseconds

closeDelaynumber

=0

Shared delay before closing a tooltip in milliseconds

timeoutnumber

=400

Window where another tooltip opens instantly after one closes

childrenReactNode

Tooltip subtree

Root

Groups all parts of the tooltip. Doesn't render its own HTML element.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChange(open: boolean, details: Tooltip.Root.ChangeEventDetails) => void

Called when the tooltip opens or closes

onOpenChangeComplete(open: boolean) => void

Called after animation completes

disableHoverablePopupboolean

=false

Close when the pointer leaves the trigger

trackCursorAxis'none' | 'x' | 'y' | 'both'

='none'

Track cursor movement for positioning

actionsRefRefObject<Tooltip.Root.Actions | null>

Imperative close and unmount actions

disabledboolean

=false

Disable the tooltip root

handleTooltip.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Tooltip content or payload-aware render child

Trigger

An element that opens the tooltip on hover or focus. Renders a button element.

handleTooltip.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

delaynumber

=600

Delay before hover/focus open in milliseconds

closeOnClickboolean

=true

Close when the trigger is clicked

closeDelaynumber

=0

Delay before closing in milliseconds

disabledboolean

=false

Prevent this trigger from opening the tooltip

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when tooltip is open
data-trigger-disabled	Present when this trigger is disabled

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner

Positions the popup against the trigger. Renders a div element.

sideSide

='top'

Side relative to anchor

sideOffsetnumber | OffsetFunction

=0

Distance from anchor

alignOffsetnumber | OffsetFunction

=0

Offset along the alignment axis

arrowPaddingnumber

=5

Minimum arrow distance from popup edges

anchorElement | VirtualElement | RefObject | function | null

Custom positioning anchor

collisionAvoidanceCollisionAvoidance

Flip, shift, or disable collision handling

collisionBoundaryBoundary

='clipping-ancestors'

Boundary used for collision detection

collisionPaddingPadding

=5

Space from the collision boundary

disableAnchorTrackingboolean

=false

Disable tracking layout shifts of the anchor

stickyboolean

=false

Keep visible after the anchor scrolls away

positionMethod'absolute' | 'fixed'

='absolute'

CSS positioning strategy

align'start' | 'center' | 'end'

='center'

Alignment relative to side

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-anchor-hidden	Present when the anchor is hidden
data-side	Side tooltip is positioned on
data-align	Alignment relative to side

Positioner CSS variables
Variable	Description
--anchor-height	Anchor height
--anchor-width	Anchor width
--available-height	Available height between anchor and viewport edge
--available-width	Available width between anchor and viewport edge
--transform-origin	Transform origin for anchored animations

Popup

A container for the tooltip content. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-align	Alignment relative to side
data-instant	Present when animations should be skipped
data-side	Side popup is positioned on
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Popup CSS variables
Variable	Description
--popup-height	Current popup height
--popup-width	Current popup width

Arrow

Displays an arrow element positioned against the anchor. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Arrow data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-uncentered	Present when the arrow cannot be centered
data-align	Alignment relative to side
data-instant	Present when animations should be skipped
data-side	Side popup is positioned on

Viewport

A viewport for animating content transitions between trigger payloads. Renders a div element.

childrenReactNode

Content to render inside the transition container

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-activation-direction	Direction from the previous trigger to the new trigger
data-current	Applied to the current content container
data-instant	Present when animations should be skipped
data-previous	Applied to the exiting content container
data-transitioning	Present while content is transitioning

Viewport CSS variables
Variable	Description
--popup-height	Parent popup height for transition containers
--popup-width	Parent popup width for transition containers

Handle

Base UI handle utility for detached triggers and imperative tooltip control.

isOpenboolean

=readonly

Whether the associated tooltip is open

open(triggerId: string) => void

=method

Open and associate the tooltip with a trigger id

close() => void

=method

Close the associated tooltip

createHandle

Function exported as createTooltipHandle for creating typed detached-trigger handles.

returnTooltip.Handle<Payload>

A new imperative tooltip handle

edbn/ui

Explorer

Tooltip

Accessible tooltip with auto-positioning and delay.

Componentsdocsbase-ui/tooltip↗

Installation

pnpm dlx edbn-ui@latest add tooltip

Manual

Create a file and paste the following code into it.

API Reference

Provider

Provides shared delay settings for tooltips and instant-open grouping. Doesn't render its own HTML element.

delaynumber

=600

Shared delay before opening a tooltip in milliseconds

closeDelaynumber

=0

Shared delay before closing a tooltip in milliseconds

timeoutnumber

=400

Window where another tooltip opens instantly after one closes

childrenReactNode

Tooltip subtree

Root

Groups all parts of the tooltip. Doesn't render its own HTML element.

defaultOpenboolean

=false

Initial open state

openboolean

Controlled open state

onOpenChange(open: boolean, details: Tooltip.Root.ChangeEventDetails) => void

Called when the tooltip opens or closes

onOpenChangeComplete(open: boolean) => void

Called after animation completes

disableHoverablePopupboolean

=false

Close when the pointer leaves the trigger

trackCursorAxis'none' | 'x' | 'y' | 'both'

='none'

Track cursor movement for positioning

actionsRefRefObject<Tooltip.Root.Actions | null>

Imperative close and unmount actions

disabledboolean

=false

Disable the tooltip root

handleTooltip.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Tooltip content or payload-aware render child

Trigger

An element that opens the tooltip on hover or focus. Renders a button element.

handleTooltip.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

delaynumber

=600

Delay before hover/focus open in milliseconds

closeOnClickboolean

=true

Close when the trigger is clicked

closeDelaynumber

=0

Delay before closing in milliseconds

disabledboolean

=false

Prevent this trigger from opening the tooltip

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
Attribute	Description
data-popup-open	Present when tooltip is open
data-trigger-disabled	Present when this trigger is disabled

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean

=false

Keep in DOM when closed

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner

Positions the popup against the trigger. Renders a div element.

sideSide

='top'

Side relative to anchor

sideOffsetnumber | OffsetFunction

=0

Distance from anchor

alignOffsetnumber | OffsetFunction

=0

Offset along the alignment axis

arrowPaddingnumber

=5

Minimum arrow distance from popup edges

anchorElement | VirtualElement | RefObject | function | null

Custom positioning anchor

collisionAvoidanceCollisionAvoidance

Flip, shift, or disable collision handling

collisionBoundaryBoundary

='clipping-ancestors'

Boundary used for collision detection

collisionPaddingPadding

=5

Space from the collision boundary

disableAnchorTrackingboolean

=false

Disable tracking layout shifts of the anchor

stickyboolean

=false

Keep visible after the anchor scrolls away

positionMethod'absolute' | 'fixed'

='absolute'

CSS positioning strategy

align'start' | 'center' | 'end'

='center'

Alignment relative to side

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-anchor-hidden	Present when the anchor is hidden
data-side	Side tooltip is positioned on
data-align	Alignment relative to side

Positioner CSS variables
Variable	Description
--anchor-height	Anchor height
--anchor-width	Anchor width
--available-height	Available height between anchor and viewport edge
--available-width	Available width between anchor and viewport edge
--transform-origin	Transform origin for anchored animations

Popup

A container for the tooltip content. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-align	Alignment relative to side
data-instant	Present when animations should be skipped
data-side	Side popup is positioned on
data-starting-style	Present when animating in
data-ending-style	Present when animating out

Popup CSS variables
Variable	Description
--popup-height	Current popup height
--popup-width	Current popup width

Arrow

Displays an arrow element positioned against the anchor. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Arrow data attributes
Attribute	Description
data-open	Present when tooltip is open
data-closed	Present when tooltip is closed
data-uncentered	Present when the arrow cannot be centered
data-align	Alignment relative to side
data-instant	Present when animations should be skipped
data-side	Side popup is positioned on

Viewport

A viewport for animating content transitions between trigger payloads. Renders a div element.

childrenReactNode

Content to render inside the transition container

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
Attribute	Description
data-activation-direction	Direction from the previous trigger to the new trigger
data-current	Applied to the current content container
data-instant	Present when animations should be skipped
data-previous	Applied to the exiting content container
data-transitioning	Present while content is transitioning

Viewport CSS variables
Variable	Description
--popup-height	Parent popup height for transition containers
--popup-width	Parent popup width for transition containers

Handle

Base UI handle utility for detached triggers and imperative tooltip control.

isOpenboolean

=readonly

Whether the associated tooltip is open

open(triggerId: string) => void

=method

Open and associate the tooltip with a trigger id

close() => void

=method

Close the associated tooltip

createHandle

Function exported as createTooltipHandle for creating typed detached-trigger handles.

returnTooltip.Handle<Payload>

A new imperative tooltip handle