LanternUI.Components.Popover (LanternUI v0.8.2)

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.

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.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

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