Hover Card

Floating panel that opens on hover with a small delay. Good for previews and inline context that should not require a click.

Default

Hover the trigger to reveal the card.

Import the parts you need from the component's folder.

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card";

Show an avatar, name, and bio in a richer card layout.

Set side to top, right, bottom, or left on the content.

Prop	Type	Default	Description
`open`	`boolean`	—	Open state. Supports v-model:open.
`openDelay`	`number`	`700`	Delay before opening (ms).
`closeDelay`	`number`	`300`	Delay before closing (ms).

Event	Description
`update:open`	Fires when the card opens or closes. Enables v-model:open.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props onto the child element instead of a wrapper.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Anchor side.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the side.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moving focus onto the trigger opens the card after openDelay.
`Esc`	Dismisses the card while it is open.

Intended as a sighted-user hover preview; it opens on hover or focus of the trigger.
The content is not focus-trapped and the card is non-modal.