Popover

At a glance

• Interactive — Buttons, links and form controls can live inside
• Non Modal — No focus trap by default
• Dismissable — Escape, outside pointer and scroll close it
• Positioned — Placement, offset, flip and width matching

Live examples

Code

Basic Popover

import { PopoverDirective, PopoverTriggerDirective } from '@quartz-headless/primitives';

<button qzPopoverTrigger [popover]="details" type="button">
  Details
</button>

<ng-template #details>
  <div qzPopover class="popover">
    <button type="button">Focusable action</button>
  </div>
</ng-template>

Controlled State

<button qzPopoverTrigger [popover]="settings" [(open)]="open" [autoFocus]="true">Settings</button>