If you have ever built a tooltip, dropdown or popover, you know Floating UI — before it, Popper.js, before that, some hand-rolled positioning logic you had to recalculate on every scroll event. The reason for all of it is gone. CSS Anchor Positioning reached Baseline 2026 status and is now broadly available in Chrome, Firefox and Safari. The browser positions your tooltip itself, without a line of JavaScript.
How it works
The model is surprisingly readable. You give an element a name with anchor-name: --my-anchor, then attach the floating element to it via position-anchor: --my-anchor. Position that element using the anchor() function — something like top: anchor(bottom) — and the browser takes over the rest: overflow detection, viewport-edge clamping, and flipping when there is not enough room. That flip behaviour is declared with @position-try. No JavaScript event listeners, no scroll handlers, no recalculation on resize.
Widely available with Safari 26
Chrome and Edge have supported it since version 125. Firefox added support in version 132. Safari joined in version 18.2 with baseline support, and Safari 26 brought full coverage including @position-try. With 91 percent of global browser traffic covered, this is no longer a "flip a flag" feature — it is something you can ship today without a polyfill. The Baseline 2026 classification is the green light the broader industry waits for before treating a platform feature as a real option.
Our take
Floating UI did excellent work as a workaround — but a workaround it always was. Positioning logic belongs in the browser, not in a JavaScript library that stacks event listeners and runs viewport arithmetic. For any new project or any new component that needs a tooltip or dropdown, there is no longer a good reason to add Floating UI or Popper.js to your dependency list. Learn anchor-name and position-anchor — it is ten lines of CSS for something that used to require a dependency.
