LanternUI.Components.Popover (LanternUI v0.9.0)

Copy Markdown View Source

Click-triggered floating panel holding arbitrary content.

<.popover placement="bottom-start">
  <.button variant="outline">Filters</.button>
  <:content>
    <div class="w-96 p-4">
      <.input field={@form[:name]} label="Name" />
    </div>
  </:content>
</.popover>

The default slot is the trigger; :content is the panel.

The panel is Zag-driven (a @zag-js/popover state machine, loaded on demand): the hook root carries data-zag plus data-scope="popover" / data-part anatomy, and Zag owns open state, focus return, and Escape/outside-click dismissal. Styling stays lui-* tokens. Two modes:

  • client (default) — Zag owns open state.
  • server-driven (controlled) — the server value (open) is truth; opens flow out through on_change, patches flow in.

Popover vs dropdown

A dropdown is a menu: role="menu", arrow-key item navigation, and it closes when an item is chosen. A popover is a surface: it holds inputs and arbitrary markup, so clicking inside must NOT close it — you have to be able to type in a field or tick a checkbox without the panel vanishing. Both ride the shared LanternOverlay runtime (anchored placement, focus return, Escape/outside-click dismissal); only these semantics differ.

Fluxon compatibility

Mirrors Fluxon's popover/1: id, target, class, placement, open_on_hover, open_on_focus, and the trigger/:content slot shape. open_on_hover / open_on_focus are accepted for drop-in compatibility but not honored — open/close is click- and keyboard-driven, which keeps a panel containing form fields usable (a hover-close would fight the pointer on its way to an input).

Summary

Functions

popover(assigns)

Functions

popover(assigns)

Attributes

  • id (:string) - Stable DOM id for the overlay hook; auto-generated when omitted, mirroring Fluxon's popover (drop-in parity). Defaults to nil.
  • class (:any) - Extra classes merged onto the panel. Defaults to nil.
  • container_class (:any) - Extra classes on the popover root wrapper. Defaults to nil.
  • placement (:string) - Where the panel anchors relative to the trigger. Defaults to "bottom-start". Must be one of "bottom-start", "bottom-end", "top-start", or "top-end".
  • target (:string) - accepted for Fluxon compat. Defaults to nil.
  • open_on_hover (:boolean) - accepted for Fluxon compat; click only. Defaults to false.
  • open_on_focus (:boolean) - accepted for Fluxon compat; click only. Defaults to false.
  • controlled (:boolean) - Server-driven open state: open is truth, patches flow into the machine. Defaults to false.
  • open (:boolean) - Open state for controlled mode (client mode ignores it). Defaults to nil.
  • on_change (:string) - Server event pushed on open change (lantern:popover:set-open replies). Defaults to nil.
  • on_change_client (:string) - Bubbling DOM CustomEvent dispatched on open change. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block (required) - The trigger element.
  • content (required) - Panel content.