Tooltip

A short description shown on hover or focus, after a delay.

Import
import { Tooltip } from '@texuli/primitives/tooltip';
Pattern
Tooltip (WAI-ARIA APG)
Size budget
16.0 KiB gzip for @texuli/primitives/tooltip
Reference
packages/primitives/docs/prim-tooltip.md

Live demo

Loading the Tooltip demo…

Anatomy

Tooltip anatomy: each box holds the parts inside it.
  • Tooltip.Provider
    • Tooltip.Root
      • Tooltip.Trigger
      • Tooltip.Content

Behavior checks

tests/behavior/scenarios/tooltip.spec.ts runs 6 rows against the Tooltip scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 6 rows
  1. the shown tip has the tooltip role
  2. hover shows it after the delay, not at once
  3. focus shows it
  4. while shown it describes the trigger
  5. Escape hides it and focus stays on the trigger
  6. moving the pointer away hides it

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 16.0 KiB gzip for @texuli/primitives/tooltip (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).