Noora.Popover (noora v0.47.0)

Renders a popover component with a trigger and customizable content.

Example

<.popover id="settings-popover">
  <:trigger :let={attrs}>
    <button {attrs}>Settings</button>
  </:trigger>
  <div>
    <h3>Popover Content</h3>
    <p>This is the content inside the popover.</p>
  </div>
</.popover>

<.popover id="form-popover" placement="bottom-end">
  <:trigger :let={attrs}>
    <span {attrs}><.icon name="filter" /></span>
  </:trigger>
  <form phx-submit="save">
    <.text_input name="name" label="Name" />
    <.button type="submit" label="Save" />
  </form>
</.popover>

Summary

Functions

popover(assigns)

Functions

popover(assigns)

Attributes

id (:string) (required) - Unique identifier for the popover.
modal (:boolean) - Enables focus trapping and interaction blocking outside the popover. Defaults to false.
auto_focus (:boolean) - Automatically focuses first focusable element when opened. Defaults to true.
close_on_interact_outside (:boolean) - Controls whether clicking outside closes the popover. Defaults to true.
close_on_escape (:boolean) - Determines if pressing Escape closes the popover. Defaults to true.
placement (:string) - Positioning placement: top, top-start, top-end, bottom, bottom-start, bottom-end. Defaults to "bottom". Must be one of "top", "top-start", "top-end", "bottom", "bottom-start", or "bottom-end".
on_open_change (:string) - Phoenix event to push when popover state changes. Defaults to nil.
Global attributes are accepted. Additional HTML attributes.

Slots

trigger (required) - Trigger element for the popover.
inner_block (required) - Content to be rendered inside the popover.