A click-triggered panel anchored to its trigger. Opens on click, closes on click-away or Escape. CSS positioned - no JavaScript dependencies.

Examples

<.popover placement="bottom-start" trigger_class="pc-button pc-button--md pc-button--white">
  <:trigger>
    Open settings
  </:trigger>
  <.h5>Dimensions</.h5>
  <%!-- panel content: forms, menus, anything --%>
</.popover>

The trigger slot renders inside a <button> (native button semantics are required for the top-layer mode's popovertarget), so don't put another button in it - pass the trigger's content (text, an icon, an avatar) and style the button itself with trigger_class.

Escaping clipped containers (top layer)

A popover inside a container with overflow: hidden (a collapsed sidebar, a table cell, a modal) gets cut off by default, because the panel is positioned within that container. Pass top_layer to render the panel in the browser's top layer instead - it will overlay everything, unclipped:

<.popover top_layer placement="right-start">
  <:trigger>
    <.avatar size="sm" name="Jane Doe" />
  </:trigger>
  <%!-- account switcher panel, etc. --%>
</.popover>

Top-layer mode uses the native HTML popover attribute (open/close and light-dismiss are handled by the browser) plus the PetalPopover hook for positioning, so it needs LiveView with the petal_components hooks registered. Without the hook the panel still opens, centered by the browser default.

Attributes

• id (:string) - the panel id; autogenerated if not set.
• placement (:string) - which side of the trigger the panel appears on, with optional -start/-end alignment. Defaults to "bottom". Must be one of "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", or "right-end".
• top_layer (:boolean) - render the panel in the browser top layer so it escapes overflow-clipped containers. Defaults to false.
• class (:any) - extra classes for the wrapper. Defaults to nil.
• trigger_class (:any) - extra classes for the trigger button. Defaults to nil.
• panel_class (:any) - extra classes for the panel. Defaults to nil.
• on_close (Phoenix.LiveView.JS) - additional JS commands to run when the popover closes (default mode only). Defaults to %Phoenix.LiveView.JS{ops: []}.
• Global attributes are accepted.

Slots

• trigger (required) - the trigger content, rendered inside a button.
• inner_block (required) - the panel content.