Popover

A popover is a floating panel that appears on demand near its trigger, providing supplemental content or actions without blocking the rest of the page.

Demo

Click or activate the trigger button to open the popover. While the popover is open, Tab through any interactive elements inside it. Press Escape or click outside to close it, and observe where focus goes when the popover is dismissed.

What to Observe

• The trigger button communicates whether the popover is currently open or closed.
• When the popover opens, keyboard focus moves into it so users do not have to Tab through unrelated content to reach it.
• Pressing Escape closes the popover and returns focus to the trigger.
• Unlike a modal, the popover does not trap focus — users can Tab past it to reach content beyond it.
• The popover panel has an accessible name or description so screen readers announce its purpose when it opens.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Trigger button: The interactive element that opens and closes the popover, communicating the expanded/collapsed state.
2. Popover panel: The floating container that holds the popover's content, positioned near the trigger.
3. Panel heading: An optional title inside the popover that provides context for its contents.
4. Body content: The supplemental information, links, or controls displayed within the popover.
5. Close button: An explicit dismiss control inside the popover that closes it and returns focus to the trigger.
6. Arrow / caret: An optional visual indicator pointing from the panel toward its trigger for spatial orientation.

Accessibility Behavior

• The trigger must communicate whether the popover is expanded or collapsed at any given time.
• When the popover opens, focus must move into the panel rather than remaining on the trigger.
• Pressing Escape must close the popover and return focus to the trigger element.
• The popover must have an accessible name or be associated with a heading inside it, so screen readers announce its purpose.
• Unlike a dialog, a popover does not trap focus — users can Tab through and past its content freely.
• Clicking outside the popover should close it, but keyboard-only users must also have a way to close it without a mouse.

Common Mistakes

• Not updating the trigger's expanded/collapsed state when the popover opens or closes, so screen readers do not know the panel is present.
• Failing to move focus into the popover on open, forcing keyboard users to Tab through all content between the trigger and the panel.
• Not returning focus to the trigger when the popover closes, leaving keyboard users at an unexpected location on the page.
• Treating the popover like a modal and fully trapping focus, which prevents users from Tabbing past it to reach other page content.
• Providing no keyboard-accessible way to close the popover, relying entirely on clicking outside.

Why This Matters

Popovers sit in a subtle middle ground between tooltips and modals. When focus management is neglected, keyboard users may never discover that a popover has appeared, or they may become stranded after it closes. Because popovers do not trap focus like modals, they carry a unique responsibility: the experience of entering, navigating, and exiting must feel natural and predictable. Done well, they surface additional context or actions without disrupting a user's flow through the page.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code