Design Pattern

Popover

A popover is a UI pattern that shows supporting content near a trigger element. With the Popover API and CSS Anchor Positioning, you can handle visibility and placement with native browser features.

Difficulty: Intermediate Category: Overlay

When to use / not use

Use it when

  • When you want to show a dropdown menu or action menu
  • When you want lightweight supporting UI before a confirmation step
  • When you want to show compact help, previews, or additional information

Don't use it when

  • When you only need short supporting text → use a tooltip
  • When you need to fully capture the user's attention → use a modal dialog
  • When the information should always stay visible → render it inline

Anatomy

1 Trigger button (targets the popover with popovertarget)
2 Popover container (element with the popover attribute)
3 Content area (text, menu, or form)
4 Action buttons (close, confirm, and so on)
  1. Trigger — Uses popovertarget to associate with the controlled popover
  2. Popover container — Uses popover or popover="manual"
  3. Content area — Holds menus, explanations, or other supporting content depending on the use case
  4. Actions — In manual mode, provide explicit closing or confirmation controls

HTML Structure

Popover API basics

  • auto mode — Closes automatically on outside click or Escape
  • manual mode — Closes only through explicit operations and suits confirmation-style UI

Key points

  • Add popovertarget to the trigger
  • Use popovertargetaction to control show, hide, or toggle behavior
  • Because popovers render in the top layer, they avoid many z-index conflicts
  • Design the focus destination after opening according to the purpose of the popover

CSS Implementation

CSS Anchor Positioning

  • Set anchor-name on the trigger to make it an anchor
  • Set position-anchor on the popover to point to that anchor
  • Use the anchor() function to position top and left relative to it
  • Reset inset if you need to take over placement explicitly

Styling points

  • Use borders and shadows to give it a floating-panel feel
  • Constrain width with max-width to keep the content readable
  • When needed, style the auto-mode backdrop as well

Accessibility

WCAG 2.1.1 Keyboard

Users need to open and close the popover from the keyboard, reach its contents, and have a way to dismiss it.

WCAG 4.1.2 Name, Role, Value

Keep the structure and labeling clear so assistive technology understands the open/closed relationship.

WCAG 2.4.3 Focus Order

When the popover opens and closes, focus should move in a natural and predictable way.

Keyboard operation

  • Use Enter or Space on the trigger to open or close the popover
  • Use Escape to close auto-mode popovers
  • Use Tab to move through focusable elements inside the popover

Live Demo

Basic popover

A basic implementation using auto mode.

PreviewFullscreen

Menu popover

A pattern for action menus.

PreviewFullscreen

Confirmation popover

A confirmation UI that closes explicitly in manual mode.

PreviewFullscreen

Common mistakes

Handling all placement in JavaScript

If CSS Anchor Positioning is enough, assuming a heavy JS-driven solution adds needless complexity.

Ignoring keyboard access

A popover that opens visually but cannot be used from the keyboard fails as a menu or confirmation UI.

No usable focus target after opening

In manual mode especially, keyboard users need a clear first point of interaction.

Using auto and manual interchangeably

When the close behavior does not match the context, accidental dismissal becomes more likely.