```tsx
import * as HoverCard from '@gentleduck/primitives/hover-card'
```

## Anatomy

```tsx
<HoverCard.Root>
  <HoverCard.Trigger />
  <HoverCard.Portal>
    <HoverCard.Content>
      <HoverCard.Arrow />
    </HoverCard.Content>
  </HoverCard.Portal>
</HoverCard.Root>
```

## Example

```tsx
<HoverCard.Root openDelay={200} closeDelay={300}>
  <HoverCard.Trigger asChild>
    <a href="/user/ahmed" className="text-blue-600 underline">@ahmed</a>
  </HoverCard.Trigger>
  <HoverCard.Portal>
    <HoverCard.Content className="bg-white shadow-lg rounded-lg p-4 w-72 border" sideOffset={5}>
      <div className="flex gap-3">
        <div className="w-12 h-12 bg-gray-200 rounded-full" />
        <div>
          <p className="font-semibold">Ahmed</p>
          <p className="text-sm text-gray-500">Software Engineer</p>
        </div>
      </div>
      <HoverCard.Arrow className="fill-white" />
    </HoverCard.Content>
  </HoverCard.Portal>
</HoverCard.Root>
```

## API

### `HoverCard.Root`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | - | Controlled state |
| `defaultOpen` | `boolean` | `false` | Initial state |
| `onOpenChange` | `(open: boolean) => void` | - | State change callback |
| `openDelay` | `number` | `700` | Delay before opening (ms) |
| `closeDelay` | `number` | `300` | Delay before closing (ms) |

### `HoverCard.Trigger`

The element that activates the card on hover. Renders an `<a>` by default.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | - | Render as child element |

### `HoverCard.Portal`

Portals content to `document.body`.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `container` | `Element \| null` | `document.body` | Portal target |
| `forceMount` | `true` | - | Force mount content |

### `HoverCard.Content`

Positioned floating content. Positioned by the Popper engine.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Preferred side |
| `sideOffset` | `number` | `0` | Distance from anchor in pixels |
| `align` | `'start' \| 'center' \| 'end'` | `'center'` | Alignment along the side |
| `alignOffset` | `number` | `0` | Alignment offset in pixels |
| `forceMount` | `true` | - | Keep mounted always |
| `onEscapeKeyDown` | `(event) => void` | - | Called on <Kbd>Escape</Kbd> press |
| `onPointerDownOutside` | `(event) => void` | - | Called on outside click |
| `onFocusOutside` | `(event) => void` | - | Called when focus moves outside |
| `onInteractOutside` | `(event) => void` | - | Called for any outside interaction |

}>
  Unlike Tooltip, HoverCard content is **interactive**. Users can move their pointer into the content and click links, buttons, etc.

### `HoverCard.Arrow`

Optional visual arrow pointing toward the trigger.