# Tooltips

Brief, hover/focus-triggered hints. Reference: `kdcvault/frontend/src/components/ui/tooltip.tsx` (base-ui Tooltip).

## Anatomy

See `anatomy.svg`. Trigger · floating panel · optional arrow. Max-width 240px; wraps to 3 lines maximum.

## Styling

- Background `brand.ink` (`#1A1530`), text `text.inverse`, `caption` typography.
- Radius `rounded.sm` (4px), padding `6px 10px`.
- Shadow `elevation.2`.
- Arrow 6×6px, same fill as panel.
- Offset 8px from trigger; flip to opposite side at viewport edge.

## Timing

- Open delay 400ms (skip if another tooltip is already open within 500ms).
- Close delay 100ms (allow hover-into-tooltip for copy / link interactions).
- Open/close transition: `motion.duration.fast` `motion.easing.standard`.

## Tokens used

`colors.brand.ink`, `colors.text.inverse`, `typography.caption`, `rounded.sm`, `elevation.2`.

## Accessibility

- Trigger is keyboard-focusable; tooltip opens on focus as well as hover.
- Use `aria-describedby` on the trigger pointing at the tooltip's `id`.
- Never put interactive content inside a tooltip — use a popover instead.
- Dismiss on `Esc` and on focus / hover leave.

## Do / Don't

- ✅ Keep copy ≤ 80 chars; one sentence, no period.
- ✅ Use to surface a *non-essential* hint (full label, keyboard shortcut, brief explanation).
- ❌ Don't put a tooltip on a tappable mobile target — touch users never see it.
- ❌ Don't put interactive elements (links, buttons) inside a tooltip — escalate to a `popover`.