# `Noora.Popover`

Renders a popover component with a trigger and customizable content.

## Example

```elixir
<.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>
```

# `popover`

## 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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*