v133 · dom

Popover invoker and anchor positioning improvements

This chromestatus represents the following related set of changes, which were resolved in https://github.com/whatwg/html/pull/9144#issuecomment-2195095228 and landed in https://github.com/whatwg/html/pull/10728:

concepts

  1. Popover invoker improvements

    Popover invokers automatically become CSS anchors for their popover. position-area can resolve relative to the invoker without explicit anchor names.

  2. Implicit anchor menu

    A three-button toolbar with drop-down menus — no anchor-name on triggers, no position-anchor on popovers. position-area resolves to the implicit invoker.

  3. position-area grid

    Nine popovers across the 3×3 invoker grid — top left, block-start, center, etc. — each placed by a single position-area keyword.

  4. Overflow escape demo

    Anchor-positioned popovers render in the top layer and escape overflow: hidden containers. Side-by-side with a clipped absolute tooltip and a working popover, plus a horizontally scrolled container.

why it shipped

The popovertarget attribute creates an "invoker" relationship between the invoking button and the popover. That does several things:

references