hover-card
Hover Card
A card that opens on hover or focus to preview what a link points to, such as a product with its image, price and rating.
States: Default
Parts
| Part | File | Does |
|---|---|---|
| HoverCard | HoverCard.vue | Groups all parts of the hover card. |
| HoverCardContent | HoverCardContent.vue | Holds what the hover card shows while open. |
| HoverCardTrigger | HoverCardTrigger.vue | Opens the hover card when the user hovers over it. |
Anatomy
<HoverCard>
<HoverCardTrigger />
<HoverCardContent />
</HoverCard>Styling
| Part | Recipe |
|---|---|
| HoverCardContent | hover-card-content |
Install
Writes 4 files into components/ui/hover-card/. For agents, npx @frontic/ui docs hover-card prints this reference as markdown; the MCP server serves the same.
- npm packages
- @vueuse/core
- reka-ui
API reference
HoverCard HoverCard.vue
Groups all parts of the hover card.
| Prop | Type | Default | |
|---|---|---|---|
| defaultOpen | boolean | false | |
| open | boolean | — | |
| openDelay | number | 700 | |
| closeDelay | number | 300 | |
| enableTouch | boolean | false | |
| Event | Payload | |
|---|---|---|
| update:open | value: boolean | |
| Slot | Slot props | |
|---|---|---|
| default | { open: boolean; } | |
HoverCardContent HoverCardContent.vue
HoverCardTrigger HoverCardTrigger.vue
Example