Components

Tooltip

A tooltip is an addition to an accessible name — never the only label. In the sidebar rail, icon buttons keep their text in the accessibility tree; the tooltip repeats what sighted users see at a glance.

Anatomy

Inverse surface on ink — annotations, not menus. No arrow: the system has no arrow token. Sits at z-tooltip (600), above toast on purpose.

Specification

Property	Value	Why
Recipe	`tooltip({ scale })`	Visual layer only — Radix owns delay, position and aria
Surface	`surface-inverse`, `text-inverse`	Distinct from dropdown popovers — this is not interactive content
Elevation	`shadow-popover` + hairline	Floating layer rule — paired with border, never shadow alone
Max width	`max-w-xs`	One short phrase — not a paragraph
Motion	`anim-fade-in` / `anim-fade-out`, 150ms	Colour and opacity only — no transform on hover tooltips

Structure

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <button type="button" aria-label="Settings">
        <SettingsIcon aria-hidden />
      </button>
    </Tooltip.Trigger>
    <Tooltip.Portal>
      <Tooltip.Content class={t.content()}>
        Settings
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

aria-label on the trigger carries the name. Tooltip text may match it for sighted users — it must not be the only name. Rating stars reject hover tooltips (WCAG 1.4.13); use a static summary instead.

Props

Prop	Type	Default	Notes
`scale`	`'md' \| 'sm'`	`'md'`	`sm` uses meta size for dense dashboard rails

Rules

Never the only accessible name. If removing the tooltip breaks understanding, the control is mislabelled.
No user-facing defaults in ui. Tooltip copy is app-owned.
Not for rating tier words. Hover tooltips that disappear on pointer move fail WCAG 1.4.13 — see Rating.
Not for essential instructions. If everyone must read it, it belongs in visible hint text via field.ts.

See also: Side nav (rail tooltips) · Layers (tooltip at 600) · Elevation

Sporting Scouter Design System

Every token on this site is generated from theme.css.