anchor-name + position-area

A tooltip that follows its anchor with no JavaScript

CaveatWithout position-try-fallbacks the tooltip will happily render off the edge of the viewport, and you will not notice, because you are testing in a wide window with the anchor in the middle of it. The fallback list is not a polish step, it is the half of the feature that handles the anchor being near an edge — which is where tooltips actually live.

FallbackAn engine without anchor positioning ignores position-anchor and position-area, and the absolutely positioned tooltip falls back to its containing block. Give that container position: relative and the un-anchored tooltip still lands somewhere sane instead of in the corner of the page.

.pin { anchor-name: --pin; }

.tip {
  position: absolute;
  position-anchor: --pin;
  position-area: block-start;
  /* the half everyone forgets */
  position-try-fallbacks: flip-block;
}

Published 24 Aug 2026