Popover

The Popover component provides a lightweight, accessible way to display contextual information or additional options. It’s perfect for showing interactive content that appears in relation to a specific element on the page.

Edit dimensions

Width Height

<div x-data="popover">
    <button x-ref="trigger" class="demo-button">Open popover</button>
    <div x-ref="content" x-cloak class="px-3 py-2 bg-white border border-zinc-300 rounded-lg shadow-lg shadow-black/5">
        <p class="font-semibold mb-1">Edit dimensions</p>
        <label for="width-input" class="text-sm">Width</label>
        <input id="width-input" class="demo-input mb-2" type="text" value="100%">
        <label for="height-input" class="text-sm">Height</label>
        <input id="height-input" class="demo-input mb-2" type="text" value="250px">
        <div x-ref="arrow" class="rounded-sm border"></div>
    </div>
</div>

Structure

<div x-data="popover">
  <button x-ref="trigger"></button>
  <div x-ref="content" x-cloak>
      <div x-ref="arrow"></div>
  </div>
</div>

API Reference

 x-data="popover"

The root component containing the state and functionality.

Property	Type	Description	Default
`open`	boolean	The open state of the popover	`false`
`placement`	enum "top" \| "right" \| "bottom" \| "left"	Preferred placement of the popover relative to the trigger element	`bottom`
`offset`	number	Distance in pixels between popover and trigger	`10`
`flip`	boolean	Wether the popover should flip when not enough space is available	`true`
`shift`	object	Shifts popover position for view optimization	`{ "padding": 10 }`
`arrow`	boolean	Display an arrow pointing to the trigger. Needs an element with `x-ref="arrow"` inside the content element.`	`true`
`onOpenChange`	function	Callback when popover open state changes	`null`