PineUiPhoenix.Components.Popover (Pine UI v0.2.0)

Copy Markdown View Source

Rich content anchored to a trigger, opened on click.

A port of the Pines popover. Unlike a tooltip, a popover opens on click and can contain interactive content.

<.popover>
  <:trigger><.button variant="outline">Settings</.button></:trigger>
  <p>Anything can go in here, including form fields.</p>
</.popover>

Summary

Overlays

popover(assigns)

Renders a popover.

Overlays

popover(assigns)

Renders a popover.

Positioning

Positioned with Tailwind utilities rather than the Alpine Anchor plugin — the same approach Pines takes — so there is no extra dependency. That does mean the panel will not flip itself away from a viewport edge; choose position to suit the layout, or reach for a floating-UI library if you need collision detection.

Accessibility

The trigger carries aria-expanded and aria-controls; the panel is role="dialog" and is labelled by its title when one is given. Escape closes and returns focus to the trigger.

Attributes

  • id (:string) - Defaults to nil.
  • position (:string) - Defaults to "bottom". Must be one of "top", "bottom", "left", or "right".
  • align (:string) - Defaults to "center". Must be one of "start", "center", or "end".
  • width (:string) - A Tailwind width class for the panel. Defaults to "w-72".
  • arrow (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • panel_class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required)
  • inner_block (required)
  • title