Tooltip

A short description on focus or hover; renders in a portal with the correct theme.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add tooltip

Dependencies

What add tooltip installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

npm

@base-ui/[email protected]

Examples

2 examples · 1 component

Contextual help

Shown on keyboard focus or hover.

On controls in different states

A tooltip on an active control and on a disabled one (wrapped so it can receive focus).

API reference

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`TooltipProvider` Shares the open delay between tooltips; wrap your app once.	`—`	—
`Tooltip` Root; accepts open, defaultOpen and onOpenChange.	`—`	—
`TooltipTrigger` Element that triggers the tooltip; use render to reuse a control.	`button`	—
`TooltipContent` Portaled content. side ("top" by default; also "bottom", "left", "right", "inline-start", "inline-end"), align and sideOffset place it.	`div`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Hidden	No visible content; no cost until it opens.
Visible on focus	Appears when the trigger receives keyboard focus.
Visible on hover	Appears on hover after the shared delay.
Close	Escape or leaving the trigger hides it.

Accessibility

The tooltip complements, it does not replace, the control's accessible label. Do not put actions or essential information in it.

It appears on keyboard focus and on hover, and closes with Escape. A disabled control cannot receive focus, so wrap it if you need to explain why it is disabled.