Overlays · core

Popover

overlay.popover

Popover: A temporary surface presented above the current interface for focused information or action.

popoverthe bubble attached to a buttonanchored popupfloating detail bubblethe surface above the pagethe temporary panel

States4

Touch target44px

Evidence8

Introduced by3 kits

Visual specimen

Same contract. Every kit voice.

MAVAN renderingopen

Translation table

What code calls it.

Webpopover attributeThe closest native or standardized web primitive.direct

ARIAdialog or no standalone roleThe primary accessibility role or state pattern.direct

SwiftUI.popoverThe nearest named SwiftUI API.direct

AppKitNSPopoverThe nearest named AppKit API.direct

Anatomy

Every part, named.

1Trigger relationship
2Backdrop or anchoring context
3Overlay surface
4Title and content
5Dismissal and focus return

Often confused with

Similar shape. Different contract.

Dropdown menunavigation.dropdown-menu

Can look similar in context, but belongs to a different semantic and behavioral family.

Tooltipfeedback.tooltip

Can look similar in context, but belongs to a different semantic and behavioral family.

Prompt · paste into your agent

Ask for the exact thing.

Implement the canonical Popover component (overlay.popover). Popover: A temporary surface presented above the current interface for focused information or action. Support these states: closed, open, busy, error. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion, focus-containment, focus-return. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.

Studio contract

What must be proven.

Required states

closed · open · busy · error

Required evidence

implementation · state-matrix · responsive · keyboard · touch · reduced-motion · focus-containment · focus-return

Source union

jade · lumen · purple-rain