A tooltip is a small panel that must follow one specific element and stay visible. Hand-rolling it means scroll listeners, viewport clamping math, and a z-index war. Anchor positioning makes the relationship declarative: name the anchor, tie the follower, pick a region. Popover handles the dismiss-on-outside-click and top-layer stacking for free.

<button class="pin" popovertarget="tip">?</button>
<div id="tip" class="tip" popover>Available after 5 PM</div>
.pin { anchor-name: --help-pin; }
.tip {
  position: fixed;
  position-anchor: --help-pin;
  position-area: top;
  margin-bottom: 0.4rem;
}

How the pieces compose

  • anchor-name marks the anchor element; position-anchor ties the follower to it.
  • position-area picks where the follower lives relative to the anchor: top, bottom, and combinations with center or span.
  • The browser flips to the opposite side automatically when the chosen region would push the follower offscreen.
  • The popover attribute supplies the open-close behavior, light dismiss, and top layer placement, so no z-index is typed anywhere.

Gate it, do not guess it

@supports (anchor-name: --test) {
  /* anchored layout lives here */
}

Anchor positioning shipped across the current engines over 2026, with Safari 27 bringing transform-aware anchors and visibility keywords that then got refined further in 27.0 and 27.2. Wrap the feature in an @supports gate anyway: outside the gate the page simply has no tooltip, which is a dignified fallback compared to a misanchored one. Test keyboard and screen reader behavior once, because the popover attribute is doing more work than it looks, and it does most of it correctly.

The gacor part is the deletion: no scroll listeners, no clamp math, no modal arcs of JavaScript. One relationship, stated in CSS, checked by the browser.