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.

Examples

Compound parts

Compose Trigger, Popup, and optional Arrow.

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>

SimplePopover preset

SimplePopover keeps the assembled 80% case copy-pasteable.

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

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

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.

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>

Props

Accessibility

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