Popover

A wrapper around React Aria’s DialogTrigger and Popover components. Unlike Tooltip, a Popover can contain interactive elements such as forms, links, or buttons.

Add via CLI

npx @a2ra/cli add popover

Basic

Example JSON

{
  "type": "Popover",
  "props": {
    "triggerLabel": "Filter options",
    "placement": "bottom"
  },
  "children": [
    {
      "type": "Form",
      "props": { "gap": "sm" },
      "children": [
        { "type": "Checkbox", "props": { "label": "In stock only", "value": "instock" } }
      ]
    }
  ]
}

Props

Prop	Type	Description
`triggerLabel`	`string`	Label for the trigger button
`placement`	`top` `bottom` default `left` `right`	Preferred position
`isOpen`	`boolean`	Controlled open state
`defaultOpen`	`true` `false` default	Open on mount
`offset`	`number`	Distance from the trigger in pixels. Default: `8`
`crossOffset`	`number`	Perpendicular offset in pixels. Default: `0`
`shouldFlip`	`true` default `false`	Flip to opposite side when out of bounds
`isKeyboardDismissDisabled`	`true` `false` default	Prevent `Escape` from closing
`maxHeight`	`number`	Maximum height in pixels before scrolling
`children`	`node[]`	Content rendered inside the popover

Notes

Use Tooltip for non-interactive hints. Use Popover when the content has clickable elements.
Escape closes the popover and returns focus to the trigger by default.
maxHeight enables internal scrolling for long content without affecting the page layout.