Popover

Material Design 3 popover component using the Popover API and CSS Anchor Positioning

Popover

Popovers display rich contextual content in an overlay positioned relative to a trigger element.

Uses the native HTML Popover API with CSS Anchor Positioning (anchor-name, position-anchor, position-area, position-try-fallbacks).

Basic Usage

Basic Popover

This is a basic popover with some informational content. It tracks the button on scroll!

CSS Anchor Positioning

Link the trigger and surface with explicit named anchors, then let CSS place the surface with position-area and flip via position-try-fallbacks:

<button style="anchor-name: --my-anchor" popovertarget="my-popover">Open</button>
<div class="popover popover-bottom" id="my-popover" popover style="position-anchor: --my-anchor">
  Content that tracks the button on scroll!
</div>

Anchored Positions

Anchored Positions

Anchored below
Anchored above
Anchored left
Anchored right

Browser Support

  • Popover API: Chrome 114+, Firefox 125+, Safari 17+
  • CSS Anchor + position-area: Chrome 125+ (HiDPI fixes in Chrome 130+)
  • Residual risk: nested scroll containers combined with ancestor transform / will-change compositing layers on older Chromium forks

Size Variants

Small Popover

Compact popover for brief messages.

Default Popover

Standard popover with balanced size for most use cases.

Large Popover

Spacious popover for more detailed content or multiple elements.

Color Variants

Customize intensity with --popover-color-intensity (default 30%):

:root {
  --popover-color-intensity: 40%;
}

Primary Popover

Primary themed popover for emphasis.

Secondary Popover

Secondary themed popover.

Tertiary Popover

Tertiary themed popover.

Surface Variant

Popover with highest surface elevation.

Rich Content

Popover with Header

Popover Title

This popover includes a header section with a title.

Popover with Footer

Complete Popover Example

Notification Settings

Choose how you want to receive notifications about activity in your workspace.

Arrow

Optional .popover-arrow element. Prefer .popover-no-arrow when the arrow is not needed (arrows follow the preferred position-area and may look wrong after a flip):

No Arrow

This popover has no arrow indicator.

Interactive Content

Use popover="manual" when the surface should not light-dismiss while interacting:

Interactive Popover

Quick Feedback

Your rating:

Manual Mode & Modal Backdrop

Manual Native Popover

Manual Popover

This popover won't close when clicking outside. You must use the button to close it.

Modal-style Native Popover

Confirm Action

Are you sure you want to proceed? This action requires confirmation.

Framework Example (React)

export function InfoPopover() {
  return (
    <>
      <button
        className="btn btn-primary"
        popoverTarget="demo-react-popover"
        style={{ anchorName: '--demo-react-popover' }}
      >
        Show Popover
      </button>
      <div
        id="demo-react-popover"
        popover=""
        className="popover popover-bottom"
        style={{ positionAnchor: '--demo-react-popover' }}
      >
        <div className="popover-body">Native Popover API — no open state required.</div>
      </div>
    </>
  );
}

API Reference

CSS Variables

Variable Default Description
--popover-color-intensity 30% Theme color mix strength for color variants

Class Names

Class Description
.popover Base surface (required with [popover])
.popover-top / .popover-bottom / .popover-left / .popover-right Preferred position-area
.popover-start / .popover-end Alignment variants
.popover-sm / .popover-lg / .popover-full Size variants
.popover-dark / .popover-primary / .popover-secondary / .popover-tertiary / .popover-surface-highest Color themes
.popover-no-arrow Hide arrow
.popover-modal Stronger backdrop
.popover-menu Compact padding for menu lists

Native attributes

Attribute Description
popover Auto light-dismiss popover
popover="manual" No light-dismiss
popovertarget Links trigger to popover id
popovertargetaction show / hide / toggle

CSS Anchor Positioning

Property Where Description
anchor-name Trigger (inline) Names the anchor
position-anchor Surface (inline) Binds surface to that name
position-area CSS class Preferred placement
position-try-fallbacks CSS Flip when space is tight

Structure

Class Description
.popover-arrow Optional arrow
.popover-header / .popover-title / .popover-body / .popover-footer / .popover-close Layout pieces
.popover-menu-item / .popover-menu-divider Menu items
  • Tooltip - Simple text hints (popover="hint" + interestfor)
  • Dialog - Modal overlays
  • Menu - Action menus

See Also