CSS Anchor Positioning: goodbye to JS workarounds for tooltips and dropdowns ⚓️
Josh Comeau explains CSS Anchor Positioning: element anchors, automatic fallbacks and popover integration.
Josh Comeau has published one of his signature, incredibly visual explanations of a relatively new specification that is already natively supported in all major browsers: the CSS Anchor Positioning API.
We all know the recurring pain: you need to attach a popup, tooltip or custom context menu to a specific button. Historically, that meant either a ton of JS calculating getBoundingClientRect(), scroll positions and resizes, or pulling in hefty libraries like Popper.js/Floating UI.
Now the browser can connect elements declaratively, right in your styles.
The highlights from Josh’s explanation:
🔹 Basic linking by name: Give the anchor element a unique identifier with anchor-name: --my-anchor, then give the floating element position: absolute and bind its axes using the anchor() function. For example: top: anchor(--my-anchor bottom).
🔹 Escaping position: relative restrictions: The tooltip no longer has to be a direct child of the button or live inside a shared container with position: relative. The mechanism finds the “anchor” by its global name within the page. No more headaches with overflow: hidden, which used to ruthlessly clip tooltips sticking out of their containers.
🔹 Smart fallback: The biggest feature is position-try-options. If a tooltip above its anchor hits the edge of the screen while scrolling, the browser automatically moves it below (for example, using flip-block), without a single line of JavaScript.
🔹 Popover integration: Anchor Positioning works perfectly with the native HTML popover attribute. This makes it easy to move tooltips into the document’s top layer, eliminating any z-index conflicts entirely.
The article follows Comeau’s classic style, with interactive playgrounds where you can tweak the code yourself and see exactly how elements behave when a container scrolls. Recommended reading for anyone who wants to lighten their JS bundle and write clean CSS.
What do you think of the API? Have you already brought it into production for popups instead of Floating UI, or are you still sticking with proven JS libraries out of habit?