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

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.
• preferred_position (:string) - The preferred direction to open the popover.Must be one of "above", "below", "mostSpace", or "cover".
• preferred_alignment (:string) - The preferred alignment of the popover relative to its activator.Must be one of "left", "center", or "right".
• 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
• inner_block