Component 19 · Complete

Tooltip

Provides a concise supporting label on pointer hover and keyboard focus without interrupting the current task.

Default

Add a short explanation

Hover the control or move keyboard focus to it. The default delay prevents distracting flashes during pointer movement.

Icon controls

Clarify unfamiliar symbols

The accessible name identifies the control. Tooltip text can repeat that label visually for sighted pointer and keyboard users.

Placement

Prefer a side and allow fallback

Top is the default. Bottom can be preferred, while the initializer still flips and clamps the surface when space changes.

Content

Keep it concise

A compact sentence can add useful context. Longer explanations and interactive content belong in Popover.

Lifecycle

Preserve existing descriptions

Initialization adds the Tooltip ID to `aria-describedby`; cleanup restores the exact value that existed before initialization.

Initializeconst cleanup = initTooltips(root)
Observends:tooltip-show / hide
Removecleanup()

Usage guidance

Never hide essential information in a Tooltip.

Use visible labels and helper text for instructions, state, and errors. Tooltips should remain short, optional, and non-interactive.

Next component: Toast