Hover Card
Rich floating content revealed on hover or focus. Use when Tooltip is too small and Popover requires a click.
User profile preview
Inline link preview
Hex UI is built on — the industry-standard headless primitives for React.
Installation
pnpm
pnpm dlx @hex-core/cli add hover-cardAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | function | — | Callback on open change |
openDelay | number | 700 | Milliseconds before the card appears |
closeDelay | number | 300 | Milliseconds before the card closes after leaving |
AI Guidance
When to use
Use for rich hover previews: user profile cards, link previews, inline references. Contains multiple elements — more than a tooltip can hold.
When not to use
Don't use for simple hover labels (use Tooltip). Don't use for click-triggered content (use Popover). Don't use as primary info on touch devices — hover doesn't exist there.
Common mistakes
- Using HoverCard for critical info (invisible on touch)
- Too-short openDelay causes flicker on mouse-over traffic
- Omitting asChild on HoverCardTrigger with a custom element
Accessibility
Radix opens on hover and keyboard focus. Content must be meaningful on focus as well as hover. Consider an alternative for touch users.
Token budget: 400