Packages

noora

0.86.0
0.86.0 0.85.0 0.84.1 0.84.0 0.83.2 0.83.1 0.83.0 0.82.7 0.82.6 0.82.5 0.82.4 0.82.3 0.82.2 0.82.1 0.82.0 0.81.4 0.81.3 0.81.2 0.81.1 0.81.0 0.80.1 0.80.0 0.79.1 0.79.0 0.78.1 0.78.0 0.77.4 0.77.3 0.77.2 0.77.1 0.77.0 0.76.0 0.75.0 0.74.0 0.73.0 0.72.0 0.71.0 0.70.0 0.69.1 0.69.0 0.68.0 0.67.0 0.66.0 0.65.0 0.64.2 0.64.1 0.64.0 0.63.2 0.63.1 0.63.0 0.62.0 0.61.0 0.60.0 0.59.0 0.58.0 0.57.0 0.56.1 0.56.0 0.55.0 0.54.0 0.53.1 0.53.0 0.52.1 0.52.0 0.51.0 0.50.1 0.50.0 0.49.0 0.48.0 0.47.0 0.46.0 0.45.0 0.44.3 0.44.2 0.44.1 0.44.0 0.43.0 0.42.0 0.41.0 0.40.6 0.40.5 0.40.4 0.40.3 0.40.2 0.40.1 0.40.0 0.39.1 0.39.0 0.38.0 0.37.0 0.36.0 0.35.0 0.34.0 0.33.0 0.32.1 0.32.0 0.31.0 0.30.0 0.29.2 0.29.1 0.29.0 0.28.5 0.28.4 0.28.3 0.28.2 0.28.1 0.28.0 0.27.0 0.26.1 0.26.0 0.25.0 0.24.0 0.23.1 0.23.0 0.22.1 0.22.0 0.21.0 0.20.0 0.19.0 0.18.0 0.17.0 0.16.0 0.15.0 0.14.0 0.13.0 0.12.1 0.12.0 0.11.2 0.11.1 0.11.0 0.10.0 0.9.0 0.8.0 0.7.0 0.6.1 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.2 0.2.0 0.1.0 0.1.0-rc.2 0.1.0-rc.1 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

A component library for Phoenix LiveView applications

HexDocs

Current section

Files

Jump to
Readme
153 Versions
7 Dependencies
Dependants
Files
Activity
noora docs components popover.md
Raw

docs/components/popover.md 

<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->



# Popover



Displays contextual content anchored to a trigger.



```html

<noora-popover><button slot="trigger">Settings</button><p>Popover content</p></noora-popover>

```



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

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

```