HoverCard
Hover-triggered popover with configurable open/close delay
Category: overlay · WCAG 2.2-AA · overlay, hover, preview, floating
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | A HoverCardTrigger and HoverCardContent pair. |
openDelay | number | 300 | Delay (ms) before the card opens on hover/focus. |
closeDelay | number | 100 | Delay (ms) before the card closes after hover/focus leaves. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-md--cascivo-shadow-md--cascivo-motion-enter--cascivo-motion-exit
When to use
- Showing a rich preview (avatar, summary, links) when a user hovers or focuses a trigger
- Supplementary, non-essential context the user can ignore without losing functionality
- Cases needing an open/close delay so brief mouse passes do not flicker the card
When not to use
- Short plain-text hints — use Tooltip
- Content the user must interact with or that should trap focus — use Popover or Modal
- Touch-primary flows where there is no hover — prefer a tap-triggered Popover
How to build an accessible HoverCard in React →
Examples
Profile preview
<HoverCard>
<HoverCardTrigger><a href="/users/ada">@ada</a></HoverCardTrigger>
<HoverCardContent>
<Avatar name="Ada Lovelace" />
<p>Wrote the first program.</p>
</HoverCardContent>
</HoverCard>Custom delays
<HoverCard openDelay={500} closeDelay={200}>
<HoverCardTrigger>Definition</HoverCardTrigger>
<HoverCardContent>A longer explanation shown on hover or focus.</HoverCardContent>
</HoverCard>