Wraps the control that will close the popover. Typically wraps a button inside the popover content.

Attributes

• id (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

The popover content panel that appears on click.

Props

• size - Size of the content: "1", "2", "3", "4" (default: "2")
• side - Placement side: "top", "bottom", "left", "right" (default: "bottom")
• align - Alignment: "start", "center", "end" (default: "start")
• Plus width/height props (max_width defaults to "480px")

Attributes

• id (:string) - Defaults to nil.
• size (:string) - Defaults to "2". Must be one of "1", "2", "3", or "4".
• side (:string) - Defaults to "bottom". Must be one of "top", "bottom", "left", or "right".
• align (:string) - Defaults to "start". Must be one of "start", "center", or "end".
• container (:string) - Defaults to "body".
• class (:string) - Defaults to nil.
• style (:string) - Defaults to "".
• width (:any) - Width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• max_width (:any) - Max width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• min_width (:any) - Min width utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• height (:any) - Height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• max_height (:any) - Max height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• min_height (:any) - Min height utility class string or map. 100px or %{xs: '100px', sm: '200px'}.
• Global attributes are accepted.

Slots

• inner_block (required)

Root container for popover. Wraps trigger and content.

Examples

<.popover_root>
  <.popover_trigger>
    <.button variant="soft">Comment</.button>
  </.popover_trigger>
  <.popover_content width="360px">
    <p>Popover content here</p>
    <.popover_close>
      <.button size="1">Submit</.button>
    </.popover_close>
  </.popover_content>
</.popover_root>

Attributes

• id (:string) - Defaults to nil.
• open (:boolean) - Defaults to false.
• default_open (:boolean) - Defaults to false.
• on_open_change (:string) - Defaults to nil.
• modal (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• style (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)

The trigger area that opens the popover on click. Wraps the control (typically a button) that toggles the popover.

Attributes

• id (:string) - Defaults to nil.
• content_id (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• style (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)