Components

Hover Card

Reveals a floating preview of related content when the user hovers over a link or trigger — ideal for profile cards, footnotes, and inline detail.

Basic usage

Wrap a trigger in HoverCardTrigger and put the floating content in HoverCardContent. Hover the link below to preview.

@comitor

Positioning

Control placement with side and align on the content, and tune timing with openDelay on the root.

Rich content

The content slot is unstyled inside — compose avatars, metadata, and actions freely, and widen it with className. The panel itself ships as w-64 with p-4, a border and the shadow-overlay elevation token, so its drop shadow follows the light and dark palettes rather than a baked-in colour.

Props

Each part forwards the full Radix prop set and exports its own prop type — HoverCardProps, HoverCardTriggerProps and HoverCardContentProps. The portal is built into HoverCardContent; there is no separate portal export to mount.

Prop	Type	Default	Description
`openDelay`	number	`700`	Milliseconds to wait after pointer enter before the card opens. Set on the root HoverCard.
`closeDelay`	number	`300`	Milliseconds to wait after pointer leave before the card closes. Set on the root HoverCard.
`defaultOpen`	boolean	`false`	Open state when initially rendered, for uncontrolled usage.
`open`	boolean	`—`	Controlled open state of the card.
`onOpenChange`	(open: boolean) => void	`—`	Called when the open state changes.
`asChild`	boolean	`false`	On HoverCardTrigger, merges props onto the child element instead of rendering an anchor.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'bottom'`	Preferred side of the trigger to render the content against.
`align`	'start' \| 'center' \| 'end'	`'center'`	Alignment of the content relative to the trigger. Defaulted by the package, not by Radix.
`sideOffset`	number	`4`	Distance in pixels between the content and the trigger. Defaulted by the package, not by Radix.
`alignOffset`	number	`0`	Offset in pixels along the alignment axis of the content.
`avoidCollisions`	boolean	`true`	Flips and shifts the card to keep it inside the viewport.
`className`	string	`—`	Additional Tailwind classes merged onto HoverCardContent — usually to widen it past the default w-64.

Accessibility

Hover cards are pointer-driven and supplementary — never put essential content or actions inside, since touch and keyboard-only users may not trigger them.
Radix wires no ARIA relationship between the trigger and the card: there is no aria-describedby and no live region, so a screen reader never announces the preview. Anything a user must hear belongs in the page, or in a Tooltip or Popover instead.
The card does open on keyboard focus of the trigger and closes on blur or Escape, so sighted keyboard users still see the preview.
Use asChild to render a real focusable element (a link or Button) as the trigger so it stays in the tab order.
Open and close timing honour openDelay and closeDelay, preventing the card from flickering as the pointer passes over the trigger.