Popover

Anchored content on thick glass. For anything richer than a tooltip and lighter than a dialog.

.popover aequitas.js

Examples

Anatomy

`button[popovertarget]`	The invoker. `popovertarget` names the popover's `id` and makes the button its anchor.
`.popover[popover]`	The panel: any element with the `popover` attribute and an `id`. Sized to its content, at most about 29rem wide.

API

Attribute	Values	Description
`popover`	boolean	Required. `popover` (auto) closes on Esc and outside clicks and closes other auto popovers; `popover="manual"` stays until closed.
`popovertarget`	`<id>`	On the invoking button: toggles the popover and anchors it below the button, flipping when it would be clipped.
`data-open`	`<selector>`	On the opener: aequitas.js calls `showPopover()`. No anchor is set this way, so prefer `popovertarget`.
`data-close`	boolean	On a control inside: aequitas.js hides the popover it sits in.

Behaviour

A [data-open="#id"] element calls showPopover() on that popover, a [data-close] control inside hides it, and aria-expanded on each invoker (by popovertarget or data-open) follows the popover as it opens and closes. Without it, popovertarget still toggles the popover natively.

From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.

Accessibility

The browser links popovertarget to the popover and exposes its expanded state on the button; a <div> with no role is read as plain content.
Focus does not move into the popover on open. With popovertarget, Tab from the invoker goes into the popover next; opened any other way, it sits wherever it is in source order.
Anchoring needs CSS anchor positioning; where it is missing the popover still opens but is not placed against its button.

Key	Effect
`Enter` / `Space`	On the invoker: toggles the popover (native).
`Esc`	Closes an auto popover (native).