# Hover card

A richer preview on hover over a reference (a cloth code, a product handle): swatch, facts and where it is used. Waits 500ms. On the phone it is tap-to-peek in a bottom sheet.

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

## Content rules

- Facts only; no actions.

## Do

- Use for codes that are otherwise opaque.

## Don't

- Put the only path to an action in a hover card.

## Accessibility

- **Keyboard:** Focus on the trigger opens; Escape closes.
- **ARIA:** Supplementary only; the link still navigates.
- **Focus:** Content is not focus-trapped.

## Tokens

`--font-code` `--text-code` `--muted-foreground` `--r-chip` `--s-2` `--z-tip` `--s-4` `--border` `--r-card` `--popover` `--e-pop` `--pop-shift` `--motion-pop-out` `--motion-handoff` `--motion-pop-in` `--hovercard-delay` `--s-3` `--w-semibold` `--text-card` `--font-title` `--font-stretch-title` `--text-small` `--w-regular`

## Files

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