Search for a command to run...
Rich preview anchored to a hover/focus trigger. Heavier glass surface than `Popover` (it's a card, not a panel), scales in from the trigger. Use for inline previews of users, links, or referenced content. For action menus, reach for `DropdownMenu`; for click-anchored panels, `Popover`.
Pass asChild on the trigger so your own Button / Link / Avatar carries the visual. HoverCard opens on hover and keyboard focus — making it accessible to tab nav by default.
HoverCardThe state container. Forwards every Radix HoverCard.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Fires when the card opens or closes. |
openDelay | number | 700 | Delay (ms) before the card opens on hover/focus. Lower for quick previews, higher for calm. |
closeDelay | number | 300 | Delay (ms) before the card closes when the pointer leaves. Generous default lets users move. |
HoverCardTriggerThe element that opens the card on hover/focus. Use asChild to project the behavior onto your own component — the trigger is not a styled wrapper.
HoverCardContentThe floating glass card. Portaled to the document root. Forwards every Radix HoverCard.Content prop.
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side. Floating-UI flips automatically when the preferred side would clip outside the viewport. |
sideOffset | number | 6 | Gap (px) between trigger and card. |
align | "start" | "center" | "end" | "center" | Alignment along the cross-axis. |
avoidCollisions | boolean | true | Disable to lock to the preferred side even when clipped. |
className | string | — | Default is w-72. Override for narrower hints (w-56) or wider profile previews (w-80). |
HoverCardContent uses glass.frosted (heavier than glass.overlay) so a richer preview reads as its own distinct layer.
Use HoverCard for rich previews — user profiles, link previews, referenced content. Pair an avatar + name + short bio, not a single line of text.
Compose with asChild + a Link or Button so the trigger is keyboard-focusable. The card
opens on focus too — accessible by default.
Tune openDelay / closeDelay per surface. Tight UIs (mentions in a chat thread) want lower
delays; ambient previews can stay calm at the 700ms default.
Use HoverCard for short labels — Tooltip is lighter and meant for one-line identifiers.
Hide critical info behind hover. Touch devices have no hover state; the content must be reachable some other way.
Stuff interactive form fields inside. Hover-cards close on pointer leave — use Popover for
click-anchored, focus-trapped content.