noora/docs/components/popover.md
Displays contextual content anchored to a trigger.
<noora-popover><button slot="trigger">Settings</button><p>Popover content</p></noora-popover>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
open | boolean | false | Controls whether the popover is open. |
modal | boolean | false | Enables modal interaction behavior. |
auto-focus | boolean | true | Focuses the first focusable element after opening. |
close-on-interact-outside | boolean | true | Closes after outside interaction. |
close-on-escape | boolean | true | Closes when Escape is pressed. |
placement | top, top-start, top-end, bottom, bottom-start, bottom-end | "bottom" | Controls the preferred placement. |
| Event | Type | Description |
|---|---|---|
noora-open-change | CustomEvent<{ open: boolean }> | Emitted when the popover opens or closes. |
| Slot | Description |
|---|---|
trigger | The control that toggles the popover. |
default | The popover content. |
| Part | Description |
|---|---|
trigger | The trigger wrapper. |
content | The popover surface. |
Opening and closing emits a noora-open-change event.
Show a simple popover with basic content.
<noora-popover placement="bottom">
<button slot="trigger" type="button" style="padding: 8px 16px;">Click me</button>
<div style="padding: 16px;">
<h3 style="margin: 0 0 8px; 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>
</noora-popover>