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.
Profile
Show an avatar, name, and bio in a richer card layout.
Sides
Set side to top, right, bottom, or left on the content.
API Reference
Props, events, and slots for each sub-component.
HoverCard
Props
| 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). |
Events
| Event | Description |
|---|---|
| update:open | Fires when the card opens or closes. Enables v-model:open. |
HoverCardTrigger
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Merge props onto the child element instead of a wrapper. |
HoverCardContent
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "bottom" | Anchor side. |
| align | "start" | "center" | "end" | "center" | Alignment along the side. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| 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.