Tooltip

Compare

Compare similar concepts

Platform equivalents

The same interaction can have a different name or contract on each platform. Check the mapping before choosing an API.

• HTML

  No direct primitive

  No direct primitive

  HTML has no robust tooltip element; the title attribute is not an equivalent keyboard and touch contract.

  Verified 2026-09-03

• WAI-ARIA APG

  Partial

  role="tooltip"

  WAI-ARIA APG 2026-09

  The work-in-progress pattern defines semantics and dismissal, but authors still implement timing, pointer continuity, and placement.

  Verified 2026-09-03Official documentation

• Radix UI

  Direct

  Tooltip.Root

  @radix-ui/react-tooltip 1.2.x

  The primitive coordinates trigger, delay, portal, content, Escape dismissal, hover, and focus.

  Verified 2026-09-03Official documentation

• shadcn/ui

  Direct

  Tooltip

  shadcn/ui docs 2026-09-03

  The Tooltip recipe wraps the Radix tooltip primitive and provider.

  Verified 2026-09-03Official documentation

• Material UI

  Direct

  Tooltip

  Material UI v9.4.0

  Tooltip anchors descriptive content to a child and supports focus, hover, touch, placement, and delay options.

  Verified 2026-09-03Official documentation

• SwiftUI

  Partial

  .help(_:)

  SwiftUI documentation 2026-09

  Help text maps to hover help on supported Apple platforms, but it is not a uniform iOS tooltip interaction.

  Verified 2026-09-03Official documentation

• Jetpack Compose

  Direct

  TooltipBox + PlainTooltip

  Android Developers 2026-08

  TooltipBox anchors a plain or rich tooltip and handles hover, long press, position, and state.

  Verified 2026-09-03Official documentation

• Flutter

  Direct

  Tooltip

  Flutter API docs 2026-09

  Tooltip provides the Material label surface and platform input triggers around its child.

  Verified 2026-09-03Official documentation

Impact profile

Measured implementation costs and operating constraints for this SkillCodex specimen. A missing evaluation is never treated as free.

Rendering

Client

Lazy weight

22 kB-gzip

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Sum of gzip -9 bytes for the lazy files of module 50349 in .next/server/app/(en)/term/[slug]/page/react-loadable-manifest.json after pnpm build:local at c9f1299.

Low-end devices

Fine

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Loaded the 390 x 844 term route in isolated Chromium with 6x CPU throttling and reduced motion, then exercised the first state change; failures are recorded as non-blocking warnings.

CPU / GPU

Radix positions a small DOM overlay from pointer and focus events; no canvas or WebGL path is present.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Static source inspection of the target lab module plus an interaction on the isolated Chromium verification route; checked DOM/React work and absence of canvas or WebGL.

Reduced motion

The global reduced-motion contract collapses animation and transition durations; the same states and controls remain available.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Inspected src/app/globals.css prefers-reduced-motion rules and repeated the target interaction with reducedMotion=reduce in Chromium.

Static fallback

Without JavaScript, the term route stays on its localized Loading fallback; the profile and initial specimen are not revealed.

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Loaded all ten prerendered routes from a local next start build in Chromium with JavaScript disabled; each HTTP 200 remained on the localized Loading fallback, so the profile and specimen were not revealed.

Server rendering

Hydrates

Measured · 2026-09-03

Environment

macOS 26.6.2; Node 24.19.0; pnpm 10.34.5; Next.js 16.3.0 Turbopack; Chromium 140

Method

Inspected the prerendered route response, then loaded the same route with JavaScript enabled and exercised the hydrated client specimen.

Maintenance

Stable

Dependencies

• @radix-ui/react-tooltip 1.2.16

Verification checklist

1. 1The same hint is available on hover and keyboard focus
2. 2The tooltip contains no interactive control
3. 3Escape closes it without moving focus
4. 4Touch users are not denied essential information

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

# Implement Tooltip in your agent

## Objective
Implement Tooltip for this verified behavior: A short, noninteractive hint that appears when a control receives pointer hover or keyboard focus.

## Prerequisites
- Inspect the repository, design system, and existing tests first.
- Preserve unrelated changes and keep the file scope bounded.
- Confirm that Tooltip matches the need before writing code.

## Required behavior
- Pointer hover or keyboard focus reveals the information after a short delay.
- Escape closes the tooltip without moving focus away from its trigger.

## States to cover
- Tooltip hidden
- Tooltip visible

## Accessibility
- ARIA role: tooltip
- The primary control or named region for Tooltip has a stable accessible name from visible text or an explicit programmatic label.
- Focus remains on the trigger; the tooltip itself never enters the tab order.
- It closes on Escape and after both focus and pointer leave the trigger and surface.
- The trigger references the tooltip description so assistive technology can read it without moving focus.
- Tab focuses the trigger
- Escape dismisses the visible tooltip

## When not to use
- The information is essential to completing the task
- The content needs links, buttons, or form controls

## Acceptance criteria
- The same hint is available on hover and keyboard focus
- The tooltip contains no interactive control
- Escape closes it without moving focus
- Touch users are not denied essential information

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Verify Tooltip after implementation

## Objective
Audit the Tooltip implementation against its behavior, states, and accessibility requirements without changing it automatically.

## Checks
- Replay the smallest representative journey.
- Check keyboard behavior, focus, accessible name, and announcements.
- Tie each gap to a specific acceptance criterion.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Debug Tooltip in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## Observable checks
- Reproduce the issue with the smallest relevant journey.
- Compare behavior with the documented states and transitions for Tooltip.
- Verify keyboard behavior, focus, accessible name, and announcements.

## Possible causes
- The chosen primitive does not match the expected behavior.
- A state, transition, or focus return is missing.
- A neighboring component captures an event or hides an accessible signal.

## Bounded corrections
- Fix the reproduced cause without recreating neighboring components.
- Preserve the public contract and add a focused regression test.
- Do not install dependencies or change remote state without authorization.

## Final verification
- The same hint is available on hover and keyboard focus
- The tooltip contains no interactive control
- Escape closes it without moving focus
- Touch users are not denied essential information

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

# Prevent the Tooltip regression

## Objective
Turn the reproduced cause into a focused regression test and compare Tooltip with neighboring concepts before widening the fix.

## Checks
- Prove that the test fails before the fix.
- Prove that it passes after the bounded fix.
- Verify that no neighboring component changed behavior.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Pack digest: sha256:2d6e46af171b871df9e5f16ddb3b8c561185fcfd693e3319fa3d70f85480bbe0

In code