Hover Card
Explore interactive examples and all component variations in our Storybook.
HoverCard displays rich preview content in a floating card when a user hovers over a trigger element. It renders in a Portal so it is never clipped by overflow constraints, and supports configurable open/close delays for fine-tuned timing.
The demos below use defaultOpen so the card content is visible without needing to hover. Remove defaultOpen in your own application to get the standard hover behavior.
Basic Usage
A username link that reveals a user profile card on hover — including an avatar placeholder, display name, bio, and join date.
Repository Preview
A GitHub-style hover card showing repository metadata — stars, forks, language, and a short description — when hovering over a repo link.
Align Variants
HoverCardContent accepts an align prop ("start", "center", "end") to control how the card aligns relative to the trigger.
With Delay
Use openDelay and closeDelay on the HoverCard root to control how quickly the card opens and closes after the cursor enters or leaves the trigger.
openDelay=200, closeDelay=100
openDelay=700, closeDelay=400
Properties
HoverCard
| Property | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | false | Whether the card is open on initial render (uncontrolled). |
open | boolean | - | Controlled open state. |
onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
openDelay | number | 700 | Milliseconds to wait before opening the card after the cursor enters the trigger. |
closeDelay | number | 300 | Milliseconds to wait before closing the card after the cursor leaves. |
HoverCardTrigger
| Property | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merges props onto the child element instead of wrapping it in a <span>. Use with <a>, <button>, or router links. |
children | ReactNode | - | The element that triggers the hover card. |
HoverCardContent
| Property | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "center" | Alignment of the card relative to the trigger. |
sideOffset | number | 4 | Distance in pixels between the trigger and the card. |
side | "top" | "right" | "bottom" | "left" | "bottom" | Preferred side for the card to appear. |
className | string | - | Additional CSS classes. The default width is w-64. |
children | ReactNode | - | Card content. |
HoverCardContent renders inside a Portal, so it is never clipped by ancestor overflow: hidden styles.