# Tooltip

A navy label for icon buttons and truncated text. Waits 400ms on hover, shows at once on keyboard focus, never holds anything interactive. Phones have no tooltips: use visible labels.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** Tooltip
- **Build:** shadcn `Tooltip` (Radix) with `delayDuration={400}`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Short label, sentence case, no full stop.

## Do

- Pair with every icon-only button on desktop.

## Don't

- Put essential information only in a tooltip.
- Tooltips on the phone.

## Motion

- In: opacity + 2px rise on `--motion-pop-in` after `--tooltip-delay`; 0ms delay on focus and under reduced motion.

## Accessibility

- **Keyboard:** Escape hides it.
- **ARIA:** Radix Tooltip: `aria-describedby` on the trigger; the trigger still has its own `aria-label`.
- **Focus:** Never focusable; never contains links.

## Tokens

`--s-2` `--z-tip` `--r-control` `--primary` `--primary-foreground` `--w-medium` `--text-small` `--font-ui` `--motion-pop-out` `--motion-handoff` `--motion-pop-in` `--tooltip-delay`

## Files

`tooltip.html` live specimen · `tooltip.css` kit rules · `tooltip.d.ts` props · full page: `docs/components/tooltip/` (phone: `m/`).