Anchor Positioning & color-mix()

For years, building a robust tooltip or dropdown menu meant using JavaScript. If the user scrolled or the window resized, JS had to constantly recalculate coordinates so the tooltip didn't detach from its target.

CSS Anchor Positioning solves this natively. You define an 'anchor' element, and tell a positioned element (like a tooltip) to tether itself to that anchor.

As the anchor moves, the browser automatically updates the tooltip's position in real-time, matching the performance of native scrolling.

Libraries like Popper.js and Floating UI were created specifically to solve this problem. While excellent, they add JavaScript payload and computational overhead.

Native anchor positioning removes that payload. It also guarantees perfect synchronization: because the browser handles the layout natively, the tooltip never 'lags' behind the anchor during fast scrolling.

Additionally, the new color-mix() function allows you to dynamically blend colors in CSS (e.g., creating a 10% translucent version of your primary theme color), further reducing reliance on CSS preprocessors or JS.

First, declare the anchor by giving it a custom dashed name: .button { anchor-name: --my-anchor; }.

Second, tether the absolute element to it: .tooltip { position: absolute; position-anchor: --my-anchor; }.

Finally, use the anchor() function to set coordinates. .tooltip { top: anchor(bottom); justify-self: anchor-center; } places the tooltip directly below the center of the button.