CSS Anchor Positioning

/* Anchor element (the reference point) */
.anchor {
  anchor-name: --my-anchor;
  /* must be positioned */
  position: relative;
}

/* Positioned element anchored to it */
.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: block-end span-inline;
  margin: 4px;
  /* optional: constrain inside viewport */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
}

/* Polyfill for unsupported browsers */
/* @oddbird/css-anchor-positioning */

/* Browser support: Chrome 125+ (flag: #enable-experimental-web-platform-features) */
/* Fallback: use JS Floating UI / Popper.js */