Skip to content

Also available as Markdown

Overlay

HoverCard

Rich preview card shown on hover or focus.

React source Core source

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.

Demo.tsxtsx
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.

Demo.tsxtsx
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.