Tooltip

Base UICopy Anchor Link

Tooltip shows a short hint when someone hovers or focuses a trigger. It is never the only place critical information should live. Wrap the app once in Tooltip.Provider at the root (same overlay shell as Setup) so open and close delays stay consistent across every tooltip on the page.

Each instance pairs Tooltip.Trigger with Tooltip.Content. The trigger accepts any control through render, including IconButton with an aria-label when the glyph alone would be ambiguous. Content stays brief — a Text node or a short phrase. For icon-only controls, repeat the accessible name in the tooltip so sighted hover matches what screen readers hear.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Tooltip } from '@viraui/react';

<Tooltip.Provider>
  <Tooltip>
    <Tooltip.Trigger />
    <Tooltip.Content />
  </Tooltip>
</Tooltip.Provider>

Tooltip.createHandle() stays out of the tree.

When to useCopy Anchor Link

• A short label or clarification on hover/focus for a control that already has an accessible name
• Icon-only toolbar buttons where the visible hint should match aria-label
• Shared delay across many tooltips via one Tooltip.Provider

When not to useCopy Anchor Link

• The surface needs interaction, a title, or dismiss controls → Popover
• A list of commands from a trigger → Menu
• Essential instructions that must stay visible without hover → put them in on-page copy

RelatedCopy Anchor Link

• Popover — anchored interactive panels
• Menu — command lists from a trigger
• IconButton — common host for icon-only tooltips

Common examplesCopy Anchor Link

Matching labelCopy Anchor Link

A labeled button with matching hint text is the baseline pattern. Prefer the provider default delay in product UI; zero delay is for demos only. The demos below wrap Tooltip.Provider locally so the sandbox stays self-contained — in an app, mount the provider once at the root.

Icon-only toolbarCopy Anchor Link

Repeat each control’s aria-label in the tooltip so hover matches what screen readers hear. Same bordered toolbar chrome as the vertical Separator editor strip. Do not hide essential instructions in tooltips alone.

Shared handleCopy Anchor Link

Detached or multi-trigger layouts share one content surface through Tooltip.createHandle(); payload render props swap copy when the active trigger changes. Hover across Align left, center, and right — same tooltip, morphing label.

Ask your agentCopy Anchor Link

Add a tooltip on the Bold button that repeats the label Bold. Use zero delay only in this demo.