Back to the catalog

Tooltips, dropdowns and popovers

Forms & Interactive Controls

The Popover API with CSS anchor positioning

Limited availabilityderived from web-features, captured 2026-09-06

web-features publishes no single version for Anchor positioning, so there is no one row for this rule. The versions its parts do have are below.

Features it needs

  • Popoversince 2025-01-27Newly available
  • Anchor positioningLimited availability

    web-features publishes no version for Anchor positioning as a whole, because a small part of it has not shipped anywhere. These are the versions for css.properties.anchor-name, the part this rule is built on.

    • Chrome125
    • Edge125
    • Firefox147
    • Safari26

This rule reads as limited availability because of Anchor positioning. The other features are better supported.

Two separate problems used to need a library. Putting an element in the top layer so it escapes overflow and z-index, and keeping it pinned to its trigger. The popover attribute solves the first, including light dismiss, Escape to close and focus handling, with no JavaScript at all. CSS anchor positioning solves the second, including position-try fallbacks that flip the popover when it would overflow the viewport. Anchor positioning is the part to check before you commit, because it has not reached Baseline yet.

When this applies

Building a tooltip, dropdown menu or popover anchored to a trigger.

The native approach

The Popover API with CSS anchor positioning
<button popovertarget="menu" id="trigger">Open</button>
<div popover id="menu">Anchored content</div>

<style>
  #trigger {
    anchor-name: --trigger;
  }

  #menu {
    position: absolute;
    position-anchor: --trigger;
    /* Sit below the trigger, aligned to its left edge. */
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 0.5rem;
    /* Flip above when there is no room below. */
    position-try-fallbacks: flip-block;
  }
</style>
Live example

MDN referenceSee it working, with an explanation

When the dependency is still right

An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.

  • You need Baseline-level support for the positioning. Anchor positioning is in all three engines now, but only from Chrome 125, Safari 26 and Firefox 147, so anything older needs a JavaScript fallback or a static position.
  • You need collision handling beyond position-try-fallbacks, such as shifting along an axis to stay in view rather than flipping.
  • You need an arrow that tracks the trigger across a flip.
  • A popover must stay open while a second one opens, or nest inside another. Auto popovers close their ancestors.
  • You need hover-with-intent timing, which the platform does not cover.

Building it

This catalog stops at the swap. These guides go through the implementation and the fallbacks. They come from Google Chrome's modern-web-guidance, Apache-2.0.

Packages this covers

Minified and gzipped, captured 2026-09-06.