ComponentsTooltip

overlaystexulinot agent-emittableapp

Tooltip

tooltip

Short delayed hint on hover or focus.

Live examples

Basic tooltip

Basic tooltip

Loading demo…

Props

Public props for Tooltip
NameKindRequiredDefaultDescription
contentstringyes—Hint text or rich snippet
childrenslotyes—Trigger snippet { props }
shortcutstringno—Shortcut string or list shown as Kbd
sideenum (top, right, bottom, left)no"top"—
alignenum (start, center, end)no"center"—
sideOffsetnumberno6—
delayDurationnumberno300—
disabledbooleannofalse—
openbooleannofalse—
classstringno——

Keyboard

Keyboard behavior for Tooltip
KeyAction
aShows on focus; content is plain text or a snippet, never a sink.

Accessibility

  • Shows on focus; content is plain text or a snippet, never a sink.

Evidence for tooltip

Latest committed gates for tooltip (as of 2026-10-23). Static snapshot — not live CI.

Behavior

checkedscenario tooltip

6 checks

Rows in tests/behavior/scenarios/tooltip.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.

Size (gzip)

@texuli/primitives/tooltip · measured 11.3 KiB · budget 16.0 KiB

Measured gzip from docs/quality/perf-primitives.md (2026-10-23).

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Icon-only controls need a name
  • Optional keyboard shortcut hints

Don’t use when

Prefer another component

  • Essential instructions (put them in visible copy)