Popover

Non-modal floating surface for interactive content; no focus trap.

Playground

Change the inputs, watch the outputs and copy the usage code.

Arrow geometry for a popover, with its open state and dismiss options.

open: false

Inputs

Placement

Arrow size (px)

Arrow padding (px)

Close on Escape

Close on outside click

Popover

Loading demo…

With an arrow

Loading demo…

$ npm install @quartz-headless/core @quartz-headless/primitives

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

Prefer owning the source? Copy it with the CLI.