Tooltip positioning without JavaScript
The old way relied on JS libraries like Popper.js or Floating UI to compute tooltip position. CSS anchor positioning ties the tooltip to its trigger with anchor-name and position-anchor.
2 compute top/left, handle scroll/resize */
3
4.tooltip {
5 position: fixed;
6 top: var(--computed-top);
7 left: var(--computed-left);
8}
2 anchor-name: --tip;
3}
4
5.tooltip {
6 position-anchor: --tip;
7 top: anchor(bottom);
8}
No layout thrash
The browser keeps tooltip and trigger in sync. No JS measuring or scroll listeners.
Declarative
You say where the tooltip goes relative to the anchor. The engine does the math.
Drop the library
Popper.js and Floating UI are great, but for simple tooltips you can skip them entirely.
How it works
The old way was to use a library like Popper.js or Floating UI: JavaScript reads the trigger and tooltip rects, computes top/left, sets them (often via CSS variables or inline styles), and subscribes to scroll and resize to update. It works but adds weight and complexity.
The modern way is CSS anchor positioning. Give the trigger anchor-name: --tip. On the tooltip, set position-anchor: --tip and use top: anchor(bottom) (or other anchor() sides). The browser keeps the tooltip positioned relative to the trigger. No JavaScript required.