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 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"]} />