Toggle Sidebar B
AppearanceLight & dark mode D

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.

Replay preview

Profile

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

Replay preview

Sides

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

Replay preview

API Reference

HoverCard

PropTypeDefaultDescription
openbooleanOpen state. Supports v-model:open.
openDelaynumber700Delay before opening (ms).
closeDelaynumber300Delay before closing (ms).
EventDescription
update:openFires when the card opens or closes. Enables v-model:open.

HoverCardTrigger

PropTypeDefaultDescription
asChildbooleanfalseMerge props onto the child element instead of a wrapper.

HoverCardContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""bottom"Anchor side.
align"start" | "center" | "end""center"Alignment along the side.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut Description
TabMoving focus onto the trigger opens the card after openDelay.
EscDismisses 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.