Tooltip

Tooltips display brief labels or messages.

Overview Api

Developer experience

content overrides title/text/buttons for fully custom content.
Supports controlled open plus openDelay/closeDelay.
A touch long press opens after 500ms and remains visible for 1.5s after release, following Material 3 guidance.
Opening one tooltip closes the currently visible tooltip in the document.
The open/close opacity/height transition is implemented once with Anime.js in @udixio/core/dom, so React and Angular share the same timing, reduced-motion behavior, and cleanup. No motion/react is used.
The tooltip surface stays mounted at all times (hidden via inert and aria-hidden) rather than mounting only while open, so it can animate out; expensive content subtrees are not torn down until the Tooltip itself unmounts.

Accessibility

Provides role="tooltip" and aria-describedby when open.

Known limitations

children stay mounted while closed, since the surface is always present for its open/close animation; expensive content is not torn down until the Tooltip itself unmounts.
position falls back to tracking getBoundingClientRect() on scroll and resize in browsers without native CSS Anchor Positioning support.

Props

React props
Name	Type	Required	Default	Description
`className`	`string \| Partial<Record<"container" \| "content" \| "actions" \| "supportingText" \| "toolTip" \| "subHead", string>> \| ClassNameComponent<TooltipInterface>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`id`	`string`	No	`—`	Custom ID for accessibility linking. Auto-generated if not provided.
`title`	`string`	No	`—`	Headline of a rich tooltip.
`variant`	`TooltipVariant`	No	`'plain'`	`'plain'` is a small text bubble; `'rich'` is a card-like surface with title/text/actions.
`text`	`string`	No	`—`	Supporting text for the tooltip.
`position`	`AnchorPosition`	No	`—`	Placement relative to the target. Defaults to `bottom-right` for `variant="rich"`, `bottom` otherwise; tooltips inside a Toolbar use `auto`.
`autoAxis`	`AnchorPositionAxis`	No	`—`	Axis used when `position="auto"`. Defaults to `vertical`; Toolbar descendants derive it from their orientation.
`trigger`	`TooltipTrigger \| TooltipTrigger[]`	No	`['hover', 'focus']`	Interaction(s) that open the tooltip.
`describeTarget`	`boolean`	No	`true`	Whether the open tooltip describes its target through `aria-describedby`.
`openDelay`	`number`	No	`400`	Delay in milliseconds before showing the tooltip. Default: 400ms
`closeDelay`	`number`	No	`150`	Delay in milliseconds before hiding the tooltip. Default: 150ms
`open`	`boolean`	No	`—`	Controlled open state.
`defaultOpen`	`boolean`	No	`false`	Initial open state when uncontrolled.
`transition`	`TooltipTransition`	No	`—`	Anime.js opacity/scale open-close timing. Shared by every framework, no `motion/react`.
`content`	`ReactNode`	No	`—`	Custom content slot that replaces title/text/buttons when provided
`anchorRef`	`RefObject<HTMLElement>`	No	`—`	Custom anchor for positioning. Defaults to the trigger element.
`onOpenChange`	`(open: boolean) => void`	No	`—`	Notifies an accepted open-state request.