Hover card
A preview of what a link points to, on the popover surface, opened by hovering or focusing the link. It previews only: touch never opens it, so the link must work on its own. Source: src/components/ui/hover-card.tsx.
Profile preview
A mention that previews the person. Hover it, or Tab to it to open from the keyboard; Esc closes it. Clicking still follows the link.
Assigned to @ada on Tuesday.
Citation preview
What it was added for: the wiki's source citations. A shorter openDelay suits a link people skim past, and side="top" keeps the card off the next line of text.
Retention dropped after the pricing change, mostly on the annual plan[1].
Timing and motion
Delays are props on HoverCard, not a provider. Motion and surface are shared with Popover; keyframes, so not interruptible.
| Value | Token / prop | Usage |
|---|---|---|
| 700ms | Radix default before opening. Lower it for citations; keep it for profile cards. | |
| 300ms | Radix default grace period, so the pointer can travel into the card. | |
| 140ms | Fade, scale from 95% and an 8px slide, as on Popover. | |
| 90ms | Fade and scale out. | |
| 50 | Same layer as popovers. The brand ladder (--z-dropdown 100) is defined but not wired in yet. |
Props
| Part / prop | Type | Default | Description |
|---|---|---|---|
| HoverCard | Radix HoverCard.Root | — | open, defaultOpen, onOpenChange. |
| openDelay | number | 700 | Hover time before opening (Radix default). |
| closeDelay | number | 300 | Time before closing once the pointer leaves (Radix default). |
| HoverCardTrigger | Radix HoverCard.Trigger | — | Renders an anchor by default; use asChild around a Link. Opens on hover and focus. |
| HoverCardContent | Radix HoverCard.Content | — | Portals itself. Takes side, collisionPadding. Popover surface, no default width or padding. |
| align | "start" | "center" | "end" | "center" | Alignment against the trigger. |
| sideOffset | number | 4 | Gap from the trigger, in px. |
Best practices
When to use
- Previews of a link's destination: a person, a document, a citation.
- A one-line label is a Tooltip. Controls the user clicks are a Popover.
- Never put the only route to an action inside a hover card.
Behavior
- The trigger is a real link; clicking navigates whether or not the card is open.
- Keep the 300ms closeDelay so the pointer can reach the card.
- Content may hold links, but nothing that must be used to finish a task.
Accessibility
- Opens on keyboard focus, closes on Esc and blur. Screen readers don't announce the card; the link text must stand alone.
- A terse trigger like [1] needs an aria-label that names the source.
Content
- A title, one or two lines of context, provenance in mono. Clamp long excerpts.
- Set a fixed width (w-72, w-80) so cards don't jump in size.