# Popover

Click-triggered panel for short interactive content. Unlike `Tooltip` / `HoverCard`, it opens on press and can host actions. `Popover` is the compound Root (`Popover.Trigger`, `Popover.Popup`, `Popover.Title`, `Popover.Content`, `Popover.Arrow`). The trigger child must forward DOM props — there is no `render` prop. For the previous `trigger` / `title` API, use the `SimplePopover` preset.

State attributes, positioner CSS variables, and `onOpenChange` details are documented in [Overlay lifecycle](/docs/overlay-lifecycle).

## Examples

### Compound parts

Compose Trigger, Popup, and optional Arrow.

```tsx
import { Button, Popover } from '@var-ui/react';

<Popover>
  <Popover.Trigger>
    <Button intent="secondary">Open</Button>
  </Popover.Trigger>
  <Popover.Popup>
    <Popover.Arrow />
    <Popover.Title>Details</Popover.Title>
    <Popover.Content>
      <p>Popover body content.</p>
    </Popover.Content>
  </Popover.Popup>
</Popover>
```

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

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

### SimplePopover preset

`SimplePopover` keeps the assembled 80% case copy-pasteable.

```tsx
import { Button, SimplePopover } from '@var-ui/react';

<SimplePopover trigger={<Button intent="secondary">Open</Button>} title="Details">
  <p>Popover body content.</p>
</SimplePopover>
```

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

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

### With actions

Put buttons or links in the body for lightweight confirm or follow-up flows without a full dialog. This demo uses the `SimplePopover` preset.

```tsx
import { Button, HStack, SimplePopover } from '@var-ui/react';

<SimplePopover trigger={<Button intent="secondary">Share</Button>} title="Share link">
  <p>Anyone with the link can view this draft.</p>
  <HStack gap="sm">
    <Button intent="primary" size="sm">Copy link</Button>
    <Button intent="ghost" size="sm">Cancel</Button>
  </HStack>
</SimplePopover>
```

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

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

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| defaultOpen | boolean \| undefined | no |  |  |
| isOpen | boolean \| undefined | no |  |  |
| onOpenChange | OverlayOpenChangeHandler \| undefined | no |  |  |
| portalContainer | Element \| undefined | no |  | Element the popover portals into instead of `document.body`. Needed when a subtree renders under a different theme than the page ambient. |

## Accessibility

Built on React Aria `DialogTrigger` / `Popover`. Focus moves into the panel; Escape closes. Keep content focused — for blocking decisions use `AlertDialog` or `Dialog`.