Noora (0.81.4)

Popover

Popover Title

This is the content inside the popover.

Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the popover
modal :boolean

Enables focus trapping and interaction blocking outside the popover
false
auto_focus :boolean

Automatically focuses first focusable element when opened
true
close_on_interact_outside :boolean

Controls whether clicking outside closes the popover
true
close_on_escape :boolean

Determines if pressing Escape closes the popover
true
placement :string

Positioning placement: top, top-start, top-end, bottom, bottom-start, bottom-end
"bottom"
on_open_change :string

Phoenix event to push when popover state changes
rest :global

Additional HTML attributes
Required trigger * :slot

Trigger element for the popover

 
<:trigger :let={attrs}>
  <button {attrs} style="padding: 8px 16px;">
    Click me
  </button>
</:trigger>
<div style="padding: 16px;">
  <h3 style="margin: 0 0 8px 0; color: var(--noora-surface-label-primary);">Popover Title</h3>
  <p style="margin: 0; color: var(--noora-surface-label-secondary);">This is the content inside the popover.</p>
</div>
Required inner_block * :slot

Content to be rendered inside the popover