# `PhoenixKitWeb.Components.Core.PopoverPanel`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v2.13.11/lib/phoenix_kit_web/components/core/popover_panel.ex#L1)

An anchored popover panel for arbitrary rich content — filter panels,
pickers, mini-forms — that opens INSTANTLY.

Open/close is pure client-side (`Phoenix.LiveView.JS`): the panel is
always rendered (hidden), and the trigger toggles it without a server
round-trip, so there is no perceptible delay and nothing to spin on.
Backdrop click and Escape hide it the same way. LiveView's JS commands
are DOM-patch aware, so server re-renders (e.g. the panel's own
interactions updating assigns) don't flip the panel shut.

Unlike `TableRowMenu` (a JS-hook dropdown for short action lists), this
holds any markup: forms, search inputs, scrollable checklists —
interacting inside never closes it (the click-away backdrop paints
BELOW the card; keep that stacking).

## Layout contract

Render the panel INSIDE a `relative` wrapper next to its trigger; on
`sm+` screens the card anchors under the trigger (aligned via `:align`),
while on small screens it becomes a full-screen overlay with a dimmed
backdrop.

## Example

    <div class="relative">
      <button type="button" phx-click={toggle_popover("my-filters")} class="btn btn-sm">
        Filters
      </button>

      <.popover_panel id="my-filters">
        <form id="my-filters-search" phx-change="search">…</form>
        <ul class="max-h-80 overflow-y-auto">…</ul>
      </.popover_panel>
    </div>

Since content inside still talks to the server, give those interactions
their own loading affordances, e.g. a spinner revealed by the form's
`phx-change-loading` class:

    <span class={["loading loading-spinner loading-xs invisible",
                  "[.phx-change-loading_&]:visible"]} />

# `hide_popover`

Client-side command that hides the panel. Used internally by the
backdrop and Escape; exposed for custom close buttons inside the panel.

# `popover_panel`

Renders the (initially hidden) popover panel. Toggle it with
`toggle_popover/2` on the trigger.

## Attributes

- `id` - DOM id (required; the toggle/hide commands target it)
- `align` - which trigger edge the card hugs on `sm+`: `"end"` (right,
  default) or `"start"` (left)
- `width_class` - card width on `sm+` (default `"sm:w-96"`); complete
  class strings only (Tailwind purge)
- `class` - extra classes merged onto the card

## Slots

- `inner_block` - the panel content (required)

## Attributes

* `id` (`:string`) (required)
* `align` (`:string`) - Defaults to `"end"`. Must be one of `"end"`, or `"start"`.
* `width_class` (`:string`) - Defaults to `"sm:w-96"`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)

# `toggle_popover`

Client-side command that toggles the panel with a quick fade/scale.
Attach to the trigger's `phx-click` (composable with other JS commands).

---

*Consult [api-reference.md](api-reference.md) for complete listing*