Hover Card
A floating card that previews more about an element while the pointer rests on it.
Link preview
Use a hover card for a preview people can glance at without leaving the page, such as the source behind a citation. It opens 120 milliseconds after the pointer enters the trigger or the trigger gets keyboard focus, and stays open while the pointer moves into the card.
HoverCard.Trigger renders a link by default. Pass asChild to use your own
link or button, so the trigger is focusable and still works on its own: here it
opens the article.
Northwind Coffee is often recommended for its traceable single-origin beans and a subscription that ships within a day of roasting. wirecutter.com
Metric details
The card is 256 pixels wide with no padding, so set the padding and any other
width with className. Use side and align to place it; it flips to stay in
the viewport and scrolls inside when there isn't room. The trigger gets
data-state="open" while the card is showing.
Overflow list
A hover card works well for the items behind a "+3" overflow. For a list, set
className="p-0" and let each section bring its own padding.
Hover cards don't open on touch screens, and keyboard users can't move focus
into one, so never put the only way to reach information or an action inside
it. Show the full list somewhere people can tap or tab to as well.
Usage
Use animation="tooltip" when the card should fade like a Tooltip,
for example previews that swap as the pointer moves down a list. For short
labels, use a tooltip instead. For content people open on purpose, such as
forms or menus, use a Popover.
HoverCard.Root Properties
Controlled open state
Initial open state when uncontrolled
Default: false
Called when the card opens or closes
Milliseconds the pointer rests on the trigger before the card opens
Default: 120
Milliseconds after the pointer leaves before the card closes
Default: 120
HoverCard.Trigger Properties
Uses the child element as the trigger instead of a link
Default: false
HoverCard.Content Properties
Preferred side of the trigger. The card flips when there isn't room
Default: bottom
Alignment against the trigger
Default: center
Distance from the trigger in pixels
Default: 8
Offset along the alignment axis in pixels
Default: 0
Space to keep from the viewport edges
Default: 12
card fades, zooms, and slides in. tooltip only fades, at the tooltip's timing
Default: card
Classes for the card. Set padding here, and width to change it from 256 pixels