Popover

A panel that opens next to the element that opened it.

Usage

Wrap the trigger and the popover in Popover.Anchor. You own the open state; the popover calls onClose on a click outside or on escape.

tsx
const [open, setOpen] = useState(false);

<Popover.Anchor>
  <Button open={open} onClick={() => setOpen((current) => !current)}>
    <Button.Label>open popover</Button.Label>
  </Button>

  <Popover open={open} onClose={() => setOpen(false)}>
    <Popover.Body>
      <p>{TEXT}</p>
      <Button active onClick={() => setOpen(false)}>
        <Button.Label>close</Button.Label>
      </Button>
    </Popover.Body>
  </Popover>
</Popover.Anchor>

Placement

tsx
<Popover placement="top" open={open} onClose={close}>
  <Popover.Body>…</Popover.Body>
</Popover>

Align

tsx
<Popover placement="bottom" align="end" open={open} onClose={close}>
  <Popover.Body>…</Popover.Body>
</Popover>

Long content

tsx
<Popover open={open} onClose={close}>
  <Popover.Body className="max-h-96 w-80">…</Popover.Body>
</Popover>

Keeping it open

With dismissible={false}, clicking outside and escape do nothing: only your own controls close it.

tsx
<Popover open={open} onClose={close} dismissible={false}>
  <Popover.Body>…</Popover.Body>
</Popover>

Where it renders

The popover is positioned inside the anchor, in the flow of the page: it scrolls with it and needs no measuring.

Reference

proptypedefault
open?booleanfalseshows it; the content stays mounted until it has faded out
onClose?() => void—called on a click outside or on escape
dismissible?booleantruewhether those two close it
placement?"top" | "right" | "bottom" | "left""bottom"the side of the anchor it opens on
align?"start" | "center" | "end""center"how it lines up along that side
className?string—merged last, so it wins
…restprops of div—always a div

Popover.Anchor

proptypedefault
as?ElementType"div"the element or component to render
…restprops of as—typed against the chosen element

Popover.Body

proptypedefault
as?ElementType"div"the element or component to render
…restprops of as—typed against the chosen element