# 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](/docs/overlay-lifecycle).

## Examples

### Default

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

```tsx
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>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Rich content

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

```tsx
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>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| trigger | ReactElement<any, string \| JSXElementConstructor<any>> | yes |  | Single focusable trigger element (e.g. a link or avatar). |
| children | ReactNode | no |  | Rich preview content — may contain interactive elements such as links. |
| closeDelay | number \| undefined | no | 300 | Delay before the card closes after the pointer/focus leaves, in milliseconds. |
| openDelay | number \| undefined | no | 700 | Delay before the card opens on hover/focus, in milliseconds. |
| placement | Placement \| undefined | no | top | Preferred placement relative to the trigger. |
| portalContainer | Element \| undefined | no |  | Element the card portals into instead of `document.body`. Needed when a subtree renders under a different theme than the page ambient. |
| title | ReactNode | no |  | Optional heading shown at the top of the card. |

## 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`.