Hover Card
A richer alternative to Tooltip for previewing arbitrary content — a user profile, a link summary, an entity reference — on hover. Unlike Tooltip, the preview body is a slot (not a plain string) and the popup itself can be hovered without closing, so it can hold interactive content.
Basic
vue
<HoverCard placement="bottom">
<Link href="#">Jamie Chen</Link>
<template #content>
<div style="display:flex;gap:12px;align-items:flex-start">
<Avatar name="Jamie Chen" size="medium" />
<div>
<p>Jamie Chen</p>
<p>Plant Manager · Ridgeline Quarry</p>
<p>Manages daily crusher operations and shift scheduling for the north site.</p>
</div>
</div>
</template>
</HoverCard>Placements
vue
<HoverCard placement="top">
<Button>Top</Button>
<template #content>...</template>
</HoverCard>Interactive card content
Because the popup itself schedules the same hide timer on mouseenter/mouseleave, you can move your cursor from the trigger into the card to click a link or button inside it.
vue
<HoverCard placement="bottom" :hide-delay="300">
<Link href="#">Acme Aggregates</Link>
<template #content>
<p>A supplier account with 4 active orders this quarter.</p>
<Button size="sm" variant="secondary">View account</Button>
</template>
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | 'top' | 'right' | 'bottom' | 'left' | 'top' | Where the card appears |
delay | number | 600 | Milliseconds of hover before the card shows |
hideDelay | number | 250 | Milliseconds after the pointer leaves before the card hides — gives time to move onto the card itself |
Slots
| Slot | Description |
|---|---|
default | Trigger/anchor content |
content | Rich preview card body |