> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/popover.md).

# x-popover

A popup whose panel renders in the browser's top layer while open, escaping clipped ancestors, with a focus trap built in.

A popup whose panel renders in the browser's top layer while open, escaping clipped ancestors, with a focus trap built in.

| Directive / magic         | What it does                                                                                                                             |
| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `x-popover`               | The root. Modifiers and expression pass to `x-popup`                                                                                     |
| `x-popover:button`        | The button that toggles the panel                                                                                                        |
| `x-popover:panel`         | The floating panel. Modifiers are `x-float` positioning modifiers (default `absolute.bottom.offset.5px.flip.update.shift.fit-x.pad.5px`) |
| `x-popover:panel.notrap`  | Disables the focus trap                                                                                                                  |
| `x-popover:panel.nofloat` | Disables floating; position the panel yourself                                                                                           |
| `x-popover:arrow`         | The arrow element, inside the panel                                                                                                      |
| `$popover`                | `isOpen` (get/set), `open()`, `close()`                                                                                                  |

While open, the panel gets `popover="manual"` and uses the native Popover API. This puts it in the top layer above `overflow: hidden` ancestors, `z-index` stacks, and transformed parents. Focus stays in the panel until it closes. `.notrap` skips the focus trap and doesn't return focus to the button. Escape and outside clicks close the panel. [x-popup](/reference/alpine/popup.md) supplies `aria-expanded` and `aria-controls`.

## Examples

### A basic popover

Use `x-popover:button` and `x-popover:panel` to toggle a top-layer panel:

```html
<div x-popover>
  <button x-popover:button>Search</button>
  <div x-popover:panel x-cloak class="bg-canvas text-content shadow">
    …
  </div>
</div>
```

The header search flyout uses this structure to escape the header's overflow clipping.

### Positioning the panel

Pass `x-float` modifiers on `x-popover:panel` to pick the side and offset:

```html
<div x-popover:panel.top-start.offset.10px.flip.shift x-cloak>…</div>
```

Passing any modifier replaces the whole default string, so bring back `flip`, `shift`, and friends when you still want them. The full modifier list lives on the [x-float](/reference/alpine/float.md) page.

### A full-width flyout

Use the `nofloat` modifier to position the panel yourself:

```html
<div
  x-popover:panel.nofloat
  x-cloak
  class="fixed top-0 left-0 right-0 flex flex-col w-full bg-canvas"
>
  …
</div>
```

Predictive search uses `nofloat` because the panel spans the viewport and is pinned to the top of the screen. It still uses the top layer and focus trap.

### An arrow

Use `x-popover:arrow` inside the panel to point at the button:

```html
<div x-popover:panel.bottom.offset.8px x-cloak>
  <div x-popover:arrow class="h-r6 w-r6">…</div>
  …
</div>
```

## Options

The expression passes through to `x-popup`, so an `isOpen` get/set pair can bind the panel to outside state. See [x-popup](/reference/alpine/popup.md) for the pattern and auto-close modifiers. Use `x-popup` directly when top-layer stacking and the focus trap are not needed: a hover tooltip like `core-popover` stays a plain popup so focus never moves into it.