Skip to content
UX Atlas
Plate CMP·012 · ComponentGrid E1 · Rev. 2026-08-14

Popover

A small panel anchored to a trigger, for interactive content that does not deserve a modal.

ComponentCraft conventionIntermediate

Definition

A popover displays content anchored to an element, typically opened by click and containing interactive controls. It differs from a tooltip, which is descriptive and usually hover-triggered.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2Requirements
  3. 3Focus, dismissal and placement
  4. 4In practice
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Contextual controls anchored to an element.
  • Filters, pickers and small forms.

Common mistakes

  • Hover-triggered popovers with interactive content.
  • No collision detection.
  • Nested popovers.

Requirements

  • Open on click, not hover, when the content is interactive.
  • Position relative to the trigger with collision detection, so it flips rather than overflowing the viewport.
  • Close on Escape, on outside click, and on the trigger being activated again.
  • Move focus into the popover if it contains controls, and return it to the trigger on close.
  • Use aria-expanded on the trigger and connect the two with aria-controls.
  • The CSS anchor positioning and popover APIs handle much of this natively where supported.

Focus, dismissal and placement

Do

  • Move focus into the popover when it contains controls, and return it to the trigger on close.
  • Close on Escape and on a click outside, and keep the trigger's expanded state accurate.
  • Reposition when there is not room, and keep the anchor visible.
  • Keep the content short enough that it does not need its own scroll.

Do not

  • Open one on hover when it contains anything clickable.
  • Nest a popover inside a popover.
  • Use one for a task that has steps. That is a drawer or a page.
  • Let it cover the element it describes.

In practice

  1. i.

    The popover that could not be reached

    Hover triggers with interactive content

    A hover-opened panel containing two links closed as soon as the pointer travelled towards them. Click to open, and a tolerance area between trigger and panel, is what makes interactive content usable.

  2. ii.

    Popover or dialog

    Where the line sits

    If losing it by clicking elsewhere would cost the reader work, it is not a popover. Anything with unsaved input belongs in a dialog that asks before it closes.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Modal Dialog

Component

A centred overlay that traps focus and suspends the page behind it.

Key difference

Both are overlays, and that is where the resemblance ends. A modal takes the page hostage until it is answered. A popover is anchored to what opened it, dismisses on outside click or Escape, and leaves the page usable.

Use Popover when

  • The content belongs to the trigger and explains or extends it.
  • Dismissing it by clicking elsewhere should be harmless.
  • The task is optional and takes seconds.

Use Modal Dialog when

  • The answer is required before anything else can continue.
  • The consequence is serious, such as a destructive confirmation.
  • Losing it by clicking elsewhere would be a mistake.

Learn about Modal Dialog

vs.

Tooltip

Component

A short, transient label that names or clarifies the element it is attached to.

Key difference

A tooltip labels something already on screen and disappears when you look away. A popover is a small surface of its own: it holds content, can take focus, and stays until dismissed.

Use Popover when

  • The content includes links, inputs or buttons.
  • The reader needs it to stay open while they read or act.
  • It is long enough that losing it on mouse-out would be a loss.

Use Tooltip when

  • The content is one line and adds nothing the reader must act on.
  • Nothing inside needs to be clicked, copied or tabbed to.
  • The element already has a visible label and needs only amplifying.

Learn about Tooltip

Local chart

CMP·012 · Region III · Grid E1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Steering LawLAW·016 · PRINCIPLES BEHIND THISElevationFND·048 · PRINCIPLES BEHIND THISContent on Hover or FocusA11Y·018 · DEPENDS ONFocus ManagementA11Y·004 · DEPENDS ONDropdownCMP·019 · OFTEN USED WITHModal DialogCMP·010 · COMMONLY CONFUSED WITHTooltipCMP·013 · COMMONLY CONFUSED WITHTooltips and Inline HelpWRT·015 · RELATED CONCEPT

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.

Related concept

Connected closely enough to change how you apply this.