Popover

Basic

Toggle a panel from its trigger. Click outside or press Escape to close, while the rest of the page stays available.

Select data

Choose an item in the panel and return the selection to your page.

Choose a teammate for your next project.

One panel, many triggers

Keep a single popover outside the repeated rows. Opening another row moves the panel and updates its content.

Explicit dismissal

Disable outside-click dismissal for content that should stay open until its action is complete. Projected form content keeps its value between openings.

Usage and API

import { AvPopover, AvButton } from 'avero-ui';

// Add AvPopover and AvButton to your component imports.

<button avButton (click)="panel.toggle($event)">Open details</button>
<av-popover #panel ariaLabel="Project details" width="360px">
  <h3>Design workspace</h3>
  <p>Your content goes here.</p>
  <button avButton (click)="panel.hide()">Done</button>
</av-popover>

<av-popover #panel ariaLabel="Quick actions">
  <ng-template #content let-close="close">
    <button avButton (click)="close()">Done</button>
  </ng-template>
</av-popover>