# Popover Displays contextual content anchored to a trigger. ```html

Popover content

``` ## Attributes | 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. | ## Events | Event | Type | Description | | --- | --- | --- | | `noora-open-change` | `CustomEvent<{ open: boolean }>` | Emitted when the popover opens or closes. | ## Slots | Slot | Description | | --- | --- | | `trigger` | The control that toggles the popover. | | `default` | The popover content. | ## Styling parts | Part | Description | | --- | --- | | `trigger` | The trigger wrapper. | | `content` | The popover surface. | Opening and closing emits a `noora-open-change` event. ## Default Show a simple popover with basic content. ```html

Popover Title

This is the content inside the popover.

```