Popover

Displays contextual content anchored to a trigger.

Popover web component

Displays contextual content anchored to a trigger.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Default

Show a simple popover with basic content.

Popover Title

This is the content inside the popover.

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

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

Name	Description
`trigger`	The control that toggles the popover.
`default`	The popover content.

Styling parts

Name	Description
`trigger`	The trigger wrapper.
`content`	The popover surface.

Behavior

Opening and closing emits a `noora-open-change` event.