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-card

Deliberate hover with openDelay

Use openDelay to require a deliberate hover before revealing — prevents the card from flashing as the cursor crosses help text

tsx

<HoverCard openDelay={500} closeDelay={150}>
  <HoverCardTrigger asChild>
    <Button variant="link" className="h-auto p-0 text-sm text-muted-foreground underline decoration-dotted">
      Why we ask
    </Button>
  </HoverCardTrigger>
  <HoverCardContent className="w-72 text-sm">
    <p>
      We use your email only to send transactional alerts (sign-in codes, billing receipts).
      You can disable each category in Notifications.
    </p>
  </HoverCardContent>
</HoverCard>

Pricing-plan inline preview

Hover-card on a plan badge that previews its full feature list — keeps the pricing table compact while still surfacing details

tsx

<HoverCard>
  <HoverCardTrigger asChild>
    <Badge variant="secondary" className="cursor-help">Pro</Badge>
  </HoverCardTrigger>
  <HoverCardContent className="w-80">
    <div className="space-y-2">
      <div className="flex items-baseline justify-between">
        <h4 className="font-semibold">Pro plan</h4>
        <span className="text-sm text-muted-foreground">$29 / month</span>
      </div>
      <ul className="space-y-1 text-sm text-muted-foreground">
        <li>• Unlimited projects</li>
        <li>• 10 GB storage per workspace</li>
        <li>• Priority email support</li>
        <li>• SSO via Google &amp; GitHub</li>
      </ul>
    </div>
  </HoverCardContent>
</HoverCard>

API 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.

Related components

Token budget: 400

Verified against @hex-core/components@1.12.0

Edit this page on GitHub