Overlays & feedback
Hover card
A rich preview that appears when you hover a reference — a teammate’s name, a project link, a URL. Where a tooltip gives a word, a hover card gives a card: avatar, stats, actions. It waits a beat before opening and bridges the gap so you can move into it.
npx shadcn@latest add @orbit/hover-cardOverview
The onboarding redesign was shipped by SCSam Chen as part of the OOrbit launch — read more in the orbit.app/changelog.
Presets
Each preset composes existing pieces — avatar, badge, progress, member stack — into a glanceable card. Hover any trigger below.
Behavior
The timing is what separates a hover card from a flickery mess.
Hover card vs. tooltip
They look similar but do different jobs.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| HoverCard | — | — | Root. Pairs one trigger with one card and owns the timing. |
| · openDelay | number | 300 | Wait before opening on hover, in ms. |
| · closeDelay | number | 140 | Grace period before closing, in ms — lets the pointer cross into the card. |
| · open / defaultOpen | boolean | — | Controlled / uncontrolled open state. |
| · onOpenChange | (open: boolean) => void | — | Called when the card opens or closes. |
| HoverCardTrigger | AnchorHTMLAttributes | — | The reference being previewed — renders a real <a> so it works for keyboard and touch users. Forwards ref. |
| · render | ReactElement | — | Replace the default link with any element; handlers and ARIA merge onto it. |
| HoverCardContent | HTMLAttributes | — | The card — a 288px surface panel. Override width/padding via className. Forwards ref. |
| · side | "top" | "bottom" | "bottom" | Which side of the trigger the card opens on. Flips to avoid collisions. |
| · align | "start" | "center" | "end" | "center" | Alignment along the trigger. |
| · sideOffset | number | 9 | Distance from the trigger in px. |
| · showArrow | boolean | true | Small surface-colored arrow pointing back at the trigger. |
Usage
A hover card is a convenience, never the only way to get information.
Preview, don’t replace
A hover card is a shortcut to detail that also lives on a real, clickable page.
Put critical-only info inside
Touch users and keyboard users may never trigger hover — never hide essentials here.
Delay before opening
An open delay keeps the card from flashing as the pointer sweeps across text.
Pack in a dozen actions
One or two primary actions; the full set belongs on the destination page.
Keyboard & accessibility
Built on Base UI PreviewCard: the trigger is a real link, keyboard focus opens the card, Escape dismisses it, and the preview never holds information that isn’t on the destination page.