i

Popover

Interrupting and annotating · researched

A floating panel anchored to a trigger that shows content and may hold interactive controls.

molecule

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Popover native: no antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Built on Tooltip/rc-trigger; layer is a div with role=tooltip, not the native popover attribute. Triggers hover, focus, click.

docs ↗ · code ↗

Carbon

Popover native: no @carbon/react 1.117.0
Variants
No tip, Caret tip, Tab tip
Sizes
—
States documented
—
Accessibility guidance
yes

Built from spans with a positioned content layer; does not use the native popover attribute or dialog. Opens on click, hover or focus per docs.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/popover/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Popover"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/popover/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Popover"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No popover. The Details component (native details element, expands in place) is the nearest, but it is not anchored to a trigger.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No popover component. The menu can position itself with the browser popover API (menu page 'Popover-positioned menus'), but that is an option of the menu, not a separate component.

Primer

Popover native: no @primer/react 38.40.1
Variants
—
Sizes
xsmall, small, medium, large, xlarge, auto
States documented
—
Accessibility guidance
yes

Popover is a styled container with a caret; the Accessibility page says it sets no role, manages no focus and handles no Esc dismissal. Anchored positioning is a separate component (AnchoredOverlay). Sizes listed are Popover.Content width values; renders a div.

1 corrected on re-read
  • alias_kind: "contested" → "same" Independent decision; prior was contested

docs ↗ · code ↗

Spectrum

Popover native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
s, m, l
States documented
default
Accessibility guidance
yes

Docs, sizes and states from the SWC (2nd-gen) page and its data file; a rsp Popover page also exists. Native check differs by implementation: SWC 2nd-gen renders a div with the popover attribute, or a dialog element when modal; SWC 1st-gen sp-popover and React Spectrum S2 (React Aria Popover) render a plain div. Accessibility section is the Button keyboard table reused verbatim, not specific to this component.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No popover. The Tooltip component (title attribute enhanced by JS) is the nearest, but holds short text only. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementpopover attribute (global), invoked by button popovertargetSpec/MDN popover values: auto (light dismiss; Esc; closes other auto popovers), manual (no light dismiss, multiple allowed), hint (does not close auto popovers; closes other hints). Empty value = auto; invalid value = manual (spec). Controls: popovertarget, popovertargetaction (button, per the button entry), JS showPopover/hidePopover/togglePopover. CSS :popover-open matches a showing popover. The attribute adds no role; semantics come from the element it is put on.
Baselinenewly · 2025-01-27
APG patternnone
ARIA role—
Shipped by4 of 7 systems

Anatomy

  1. trigger — MDN popover attribute: an invoking element (a button or input type=button with popovertarget) or showPopover(); the popover is anchored to it by design, not by HTML (anchoring is CSS).
  2. popover — The element carrying the popover attribute; hidden with display none until shown, then in the top layer.
  3. content — Any content; the popover attribute can be put on any element (spec: so authors keep the most relevant semantics).

The seven states

default Hidden (display none) until opened.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Not specified by the sources read for the popover attribute; focus management is the author's.
active Mapping inference: 'active' = popover visibility state showing (matches :popover-open), not an APG state.
disabled n/a — Not defined; the invoking button may be disabled.
error n/a — Not defined.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 2 of 35 fields changed on the second read — open any “corrected” note to see what it said before.