# CSS Anchor Positioning: place tooltips and menus without JavaScript
Table of Contents
A small box that pops up next to the right button to explain what it does (a “tooltip”, meaning a hint that appears on demand). A menu that opens right below the item that called it. An info card pinned to an icon. These are trivial to picture, yet surprisingly awkward to build well on a web page. The reason is that for years the browser had no direct way to say “place this element next to that one.” In May 2024 something arrived that tackles exactly this problem: CSS Anchor Positioning, a feature that lets you tether one element to another using only CSS, the language that defines how pages look, without reaching for JavaScript.
The news in brief
The feature landed in stable form with Google Chrome 125, released on 14 May 2024, and with Microsoft Edge, which shares the same rendering engine (Chromium). At the time of the announcement, Firefox and Safari don’t support it yet; their teams are working on it. On top of that, the specification is still a draft from the W3C’s CSS Working Group, the body that defines web standards, so some details could change. In practice this is a new feature, available for now in a single browser engine. That’s an important thing to keep in mind before adopting it on a production site.
The problem: putting one element next to another
To see why the news matters, it helps to step back. An element like a tooltip is usually “pulled” out of the normal page flow (with the CSS property position: absolute) and placed using coordinates. The catch is that the element has no idea where the button it should sit next to actually is. And the button’s position keeps changing: when the page scrolls, when the window is resized, when the surrounding text grows.
The answer, until now, was JavaScript, the programming language that runs in the browser. You needed code to measure the button’s position, work out the tooltip’s coordinates, and repeat that calculation on every scroll or resize. To avoid rewriting this logic each time, developers reach for specialized libraries such as Floating UI (the successor to Popper), built precisely to handle these calculations and the edge cases, like flipping the tooltip above the button when there’s no room below. These are capable tools, but they come at a cost: extra code to load and maintain, and calculations that, running on every scroll, can weigh the page down and hurt the responsiveness measured by metrics like INP.
What anchor positioning does
Anchor positioning moves this work into the browser, in the same vein as other features that bring into the engine capabilities that used to rely on external code, like the Prompt API for AI. The idea is to declare the relationship directly in CSS: one element is marked as an “anchor”, another is positioned relative to it. From then on, the browser keeps them tied together and recomputes the position on its own whenever something moves or the page scrolls. Because the feature is built into the engine, this recalculation happens efficiently, without the extra code that used to run on every event.
How it works, in practice
The mechanism rests on a few ingredients. First you give the anchor a name with the anchor-name property. Then, on the element you want to place, you use position-anchor to point at that name and the anchor() function to align its edges to the anchor’s edges.
/* the button becomes an anchor, with a name we choose */.button { anchor-name: --info;}
/* the tooltip is tethered to that anchor and placed just above it */.tooltip { position: absolute; position-anchor: --info; bottom: anchor(top); /* the tooltip's bottom edge meets the anchor's top edge */ justify-self: anchor-center; /* centered horizontally against the button */}The line bottom: anchor(top) reads like this: “put the tooltip’s bottom edge at the level of the anchor’s top edge”, meaning place it above the button. By changing these references you move the element above, below, or to the side, never spelling out absolute coordinates and never writing a line of JavaScript.
When there’s no room
The most interesting case is the very one that makes hand-rolled positioning tedious: what happens if the tooltip, placed above the button, ends up off-screen because the button is near the top edge? Here anchor positioning offers a built-in fallback mechanism. Through a dedicated rule (@position-try) you can list alternative positions, and the browser picks the first one that fits without being clipped. It’s the same “smart” behavior that used to require libraries, achieved with CSS alone. There’s also a way to hide the element when the anchor scrolls out of view, so a tooltip doesn’t hang there over nothing.
What changes compared to JavaScript libraries
For anyone building interfaces, the main upside is less code to write and maintain. For common cases - tooltips, menus, small pop-up panels - you no longer need to add a dedicated library just to place one element next to another. The browser knows where the elements are and updates everything itself, more consistently from one site to the next.
This doesn’t retire the libraries. They stay useful for complex scenarios, for animations and special behaviors, and above all for guaranteeing the same result today, across every browser, including the ones that don’t support the native feature yet. The choice, in short, depends on the project.
Availability and caveats
Since this is a new feature and, for now, present in a single engine, it’s wise to adopt it with a progressive enhancement approach: build the interface so it stays usable even where the feature is missing, treating native anchoring as a bonus where it’s available. Alternatively, you can keep using a library as a fallback and switch on the native method only in browsers that know it. Anchor positioning pairs well with the Popover API, another recent feature meant for showing overlaid panels such as menus and small windows, and with View Transitions for animating state changes: together they cover much of what these layered interfaces need.
In short
CSS Anchor Positioning lets you tether one element to another directly in CSS, handing the position calculation to the browser. It arrived in stable form with Chrome 125 in May 2024, while the other browsers are still implementing it, and the specification is still a draft. For frontend work it means less JavaScript and fewer dependencies for a very common task, bearing in mind that support isn’t universal yet. It’s one of those pieces that, over time, shift into the browser jobs that used to fall on the people writing the code.
