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; }

The demo’s full CSS

.dm-ap { position: relative; display: grid; place-items: center; min-height: 150px; }
.dm-ap-btn { anchor-name: --dm-save; font: inherit; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 10px; border: 0; background: #0a0a0f; color: #fff; }
.dm-ap-tip { position: absolute; position-anchor: --dm-save; position-area: top;
  margin-bottom: 8px; position-try-fallbacks: flip-block;
  font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: #fff;
  border: 1px solid #c9cdd8; color: #1c1f2a; white-space: nowrap; }

For browsers without it

Check the badge above, and while it says limited, 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 above simply sits at the top-left of its box.