Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.

Unfortuneatly, preferred_position and preferred_alignment are not available. Instead you must use <:overlay ... />. Often this will need a wrapper with position:relative. In case of cards, you will need <.card shadow_bevel={%{position: "static"}}> to avoid clipping.

Examples

<.popover id="someid">
  <:activator content="More Actions"/>
  <:action content="Import"/>
  <:action content="Export"/>
</.popover>

See

• https://polaris.shopify.com/components/overlays/popover
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Popover/Popover.tsx

Attributes

• id (:string) (required) - DOM id of the popover's parent.
• popover_id (:string) - DOM id of the popover.
• active (:boolean) - Show or hide the Popover. Defaults to true.
• z_index_override (:integer) - Override on the default z-index of 400. Defaults to nil.
• full_width (:boolean) - Allow popover to stretch to the full width of its activator.
• on_close (:any) - Callback when popover is closed. Defaults to nil.
• prevent_close_on_child_overlay_click (:boolean) - Prevents closing the popover when other overlays are clicked. Defaults to false.

Slots

• activator (required)
• action - Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.
• section
• overlay - Attributes to be sent to the Overlay div. Accepts attributes:
  • left (:string)
  • right (:string)
  • top (:string)
  • bottom (:string)
• inner_block