Popover

A floating container that holds richer content than a menu — a mini form, a chart, a date range picker.

Stable .popover Rich content

Default

Variance threshold

Cash differences within this range close without supervisor sign-off.

Settings popover

With mini-form

Quick-edit a value without leaving the page.

Quick discount
Quick-discount popover

Do & don't

Do

Use a popover when the user is editing one related field. Reach for a sheet when there are three or more.

Don't

Put primary navigation in a popover. The user can’t come back to it.

Do

Anchor to the trigger; flip placement on edge collisions.

Don't

Block the page with a popover. If the user can’t click outside, it’s a modal.