Layout

Anchor positioning

Limited availability

Replaces: A JavaScript positioning library for tooltips, menus and popovers. One element is tethered to another in CSS, with fallbacks when it would overflow.

See it working

Tethered to the button, in CSS

The syntax

.button  { anchor-name: --save; }
.tooltip { position: absolute; position-anchor: --save;
           position-area: top; margin-bottom: 8px;
           position-try-fallbacks: flip-block; }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

For browsers without it

Until the badge says widely available, ship the fallback FIRST: position the tooltip with ordinary absolute positioning inside a relative wrapper, then move it to the anchor inside @supports (anchor-name: --a). In a browser without support the tooltip in the demo simply sits at the top-left of its box.

Before you ship it

inset-area is now position-area

Chromium shipped this property as inset-area first, so tutorials and answers from that period use the old name with exactly the same values. MDN notes both names work for a short while; write position-area. Source

A flipped element can stay flipped

Once a fallback position is used, some browsers keep the element there even after there is room again in the position you asked for. Test the tooltip near an edge, then scroll it back into open space. Source

It needs an absolutely positioned element

position-area does nothing unless the element is absolutely positioned and has a default anchor. A tooltip that will not move is usually missing position: absolute or position-anchor. Source