Popover

A positioned, dismissable overlay anchored to a trigger — for rich content that a tooltip can't hold.

<div data-controller="zag-popover" class="relative inline-block">
  <button
    data-part="trigger"
    class="border-input bg-popover hover:bg-accent focus-visible:ring-ring rounded-lg border px-4 py-2 text-sm font-medium shadow-sm transition focus:outline-none focus-visible:ring-2"
  >
    Shipping details
  </button>
  <div data-part="positioner">
    <div
      data-part="content"
      hidden
      class="border-border bg-popover z-50 w-64 rounded-lg border p-4 shadow-lg focus:outline-none"
    >
      <div class="flex items-start justify-between">
        <h3 data-part="title" class="text-sm font-semibold">Shipping</h3>
        <button
          data-part="close-trigger"
          class="text-muted-foreground hover:bg-accent hover:text-muted-foreground -mr-1 -mt-1 rounded p-1"
          aria-label="Close"
        >
          ✕
        </button>
      </div>
      <p data-part="description" class="text-muted-foreground mt-1 text-sm">
        Orders ship within 1–2 business days and arrive in about a week.
      </p>
    </div>
  </div>
</div>

Parts

trigger, indicator, anchor, positioner, arrow, arrow-tip, content, title, description, close-trigger.

Values

Attribute	Type	Default	Description
data-zag-popover-open-value	Boolean	false	Open by default.
data-zag-popover-modal-value	Boolean	false	Trap focus and block outside interaction.
data-zag-popover-placement-value	String	"bottom"	Popper placement.
data-zag-popover-gutter-value	Number	8	Gap (px) between trigger and content.
data-zag-popover-auto-focus-value	Boolean	true	Focus the content when it opens.
data-zag-popover-close-on-escape-value	Boolean	true	Close on Escape.
data-zag-popover-close-on-interact-outside-value	Boolean	true	Close on outside click.

Events

Emits zag-popover:change — detail is { open }.

Programmatic control

open(), close(), isOpen.