Popover

Preview Code

375 768 Full

Open

html

<div class="aparte-popover" role="dialog" aria-label="Filters">
  <label class="aparte-field-label" for="q">Search</label>
  <input class="aparte-field" id="q" />
  <button class="aparte-btn aparte-btn--primary aparte-btn--solid">Apply</button>
</div>

.aparte-popover is deliberately just a box: the surface, border and shadow that say “this floats above the page”. What goes inside (a form, a colour picker, a card of details) and where the box sits are yours. Its one limit is --aparte-popover-max-width, so that its content cannot grow it without bound.

The browser’s own popover attribute pairs well with it: popover on the box and popovertarget on its button open and close it with no script, above everything, and close it on Escape or a click outside.

Customize

Variable	Default
--aparte-popover-shadow	0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16)
--aparte-popover-max-width	—

Classes

.aparte-popover

Accessibility

• A popover holding a form is a non-modal dialog: give it role="dialog" and a name (aria-label or aria-labelledby), and move the focus into it when it opens.

Related

• Menu — the floating surface for a list of commands.
• Dialog — a modal box that blocks the page.
• Tooltip — a short label, not a box to act in.