HoverCard

Rich preview shown on hover or focus. Unlike Tooltip, content may include interactive elements (links). Open/close delays are independent (openDelay / closeDelay). HoverCard stays the assembled preset (trigger / title / children). Compound parts (HoverCard.Root, HoverCard.Trigger, HoverCard.Popup, HoverCard.Title, HoverCard.Content) are available for custom chrome. The trigger child must forward DOM props — there is no render prop.

State attributes, positioner CSS variables, and onOpenChange details are documented in Overlay lifecycle.

Examples

Default

Wrap a focusable trigger (often a Link) and pass preview children.

import { HoverCard, Link } from '@var-ui/react';

<HoverCard trigger={<Link href="/u/ada">Ada Lovelace</Link>} title="Ada Lovelace">
  <p>Mathematician and early computing pioneer.</p>
</HoverCard>

Rich content

Add a title plus denser body copy or links for profile / entity previews.

import { HoverCard, Link, Text } from '@var-ui/react';

<HoverCard trigger={<Link href="/u/ada">@ada</Link>} title="Ada Lovelace">
  <Text size="sm" tone="secondary">
    Mathematician and early computing pioneer.
  </Text>
  <Link href="/u/ada">View profile</Link>
</HoverCard>

Props

Accessibility

Opens on hover and focus without trapping focus, so users can move into the card to activate links. Prefer generous hit targets on the trigger. For click-only panels use Popover.