Tooltip

A contextual popup that appears on hover or keyboard focus to provide supplementary information. Built on Base UI Tooltip  with built-in ARIA attributes and keyboard support.

Preview

Examples

Side

Controls which side of the trigger the tooltip appears on. The tooltip automatically flips to the opposite side when there is not enough space.

Arrow

Visible by default. Set showArrow={false} to hide it.

Not shown in the game theme, where the pixel-art aesthetic omits directional arrows.

Rich content

content accepts any ReactNode, allowing arbitrary markup inside the tooltip.

Disabled

Prevents the tooltip from rendering.

TooltipProvider — grouped timing

Wrapping tooltips in TooltipProvider gives them a shared hover-delay timer. After the first tooltip opens, subsequent ones appear without delay. This pattern is common in toolbar implementations.

Set delay and closeDelay on the provider to control timing for all wrapped tooltips.

Controlled

Pass open and onOpenChange to control visibility programmatically.

Guidelines

When to use

Use Tooltip for supplementary information that is helpful but not required. Touch and keyboard users may not have access to tooltip content; do not rely on it for anything essential.

Accessibility

• The popup has role="tooltip" and is associated with its trigger element via ARIA automatically.
• The tooltip opens on keyboard focus and closes on Escape.
• Avoid placing interactive elements (links, buttons) inside the popup. Keyboard users cannot reach them.

Props

Tooltip

TooltipProvider