Tooltip · Tooltip | SkillCodex

Tooltip

Component preview

A short, noninteractive hint that appears when a control receives pointer hover or keyboard focus.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: hint, hover tip, help bubble

a little label when I hover the icon
text that explains a button on focus
a tiny hint beside the question mark
show the icon meaning without clicking
help text that disappears when I leave
a name for an unlabeled toolbar icon

Try it

Small contextual surfaces

Compare all three behaviors

Shared comparison scenario: A project workspace must reveal brief help, supporting details, or a short action list from a compact control without leaving the current task.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Your task

Reveal the icon's name with pointer and keyboard, then dismiss it with Escape.

Edge case to verify

On touch, the icon still has a visible accessible label path and no information depends only on hover.

Parts of the specimen

Use it when

Explaining an unfamiliar icon
Expanding a short truncated label

Avoid it when

The information is essential to completing the task
The content needs links, buttons, or form controls

Compare similar concepts

Unlike Tooltip, a Popover can contain interactive content; unlike Dropdown menu, it is not limited to a list of actions.

Popover

Use Dropdown menu for commands such as Edit or Archive, not for choosing a form value like Select and not for arbitrary rich content like Popover.

Dropdown menu

Technical details

Behaviors

Reveal on focus or hover
Pointer hover or keyboard focus reveals the information after a short delay.
Dismiss with Escape
Escape closes the temporary surface and returns focus to a sensible control.

States

Tooltip hidden
Tooltip hidden
Tooltip visible
Tooltip visible

State transitions

Tooltip hidden → Tooltip visible
Pointer hover or keyboard focus reaches the trigger.
Tooltip visible → Tooltip hidden
Hover and focus leave the trigger, or Escape dismisses the hint.

Test scenarios

Context: A compact analytics toolbar includes an unfamiliar export icon.
Mission: Reveal the icon's name with pointer and keyboard, then dismiss it with Escape.
Primary state: The hint appears beside the focused export button and leaves the button operable.
Edge case: On touch, the icon still has a visible accessible label path and no information depends only on hover.

Accessibility

Role: tooltip
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: Focus remains on the trigger; the tooltip itself never enters the tab order.
Dismissal: It closes on Escape and after both focus and pointer leave the trigger and surface.
Scroll: Page scrolling stays available. The floating surface remains anchored to its trigger or closes when that trigger leaves the viewport.
Announcement: The trigger references the tooltip description so assistive technology can read it without moving focus.
Keyboard: Tab focuses the trigger
Escape dismisses the visible tooltip

Bindings

Tooltip.Root
implementationKind
radix
nativeElement
Not applicable
ariaPattern
tooltip
radixPrimitive
Tooltip
shadcnRecipe
Tooltip
runtimeDependency
@radix-ui/react-tooltip@1.2.12
packageName
@radix-ui/react-tooltip
exportName
Tooltip.Root
exactVersion
1.2.12
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Radix Tooltip implements the disclosure behavior, but content, timing, touch fallback, and final accessibility testing remain product responsibilities.
Verify binding source

Sources

WAI-ARIA APG: Tooltip Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Tooltip: tooltip role, trigger relationship, focus retention, and Escape dismissal guidance.
Radix Primitives: Tooltip
Radix Primitives · documentation · 2026-07-16
Claim covered: Tooltip: documented Radix Tooltip parts, open-state control, positioning, and dismissal behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.