CSS Anchor Positioning is now Baseline - anyone using it in production yet?

Frontend
, ,
1

So CSS Anchor Positioning just hit Baseline status now that Firefox 147 shipped support for it. For those who haven’t been following, it lets you position an element relative to another “anchor” element purely in CSS, no JavaScript needed. Think tooltips, popovers, dropdown menus, floating labels, all the stuff we’ve been reaching for Floating UI or Popper.js to handle.

The basic idea looks something like this:

.trigger {
  anchor-name: --my-trigger;
}

.tooltip {
  position: fixed;
  position-anchor: --my-trigger;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block, flip-inline;
}

That position-try-fallbacks part is what really sells it for me. The browser automatically flips the positioned element if it would overflow the viewport. That’s like 80% of the code in most tooltip libraries just gone.

I’ve been experimenting with it for a tooltip component in a side project and it works surprisingly well. But I have a few questions for anyone who’s gone further:

  1. Fallback story - what are you doing for the ~5% of users still on older browsers? Are you shipping Floating UI as a polyfill, or just accepting degraded positioning?

  2. Dynamic anchors - has anyone tried switching the position-anchor value at runtime, like for a context menu that attaches to whatever element you right-click? I ran into some flickering when updating the anchor name via JS.

  3. Performance - the whole pitch is that the browser handles repositioning natively so it should be faster than JS-based solutions. Has anyone actually measured this in a heavy UI with lots of anchored elements (like a data table with per-cell tooltips)?

  4. Popover API combo - are you pairing this with the Popover API for the show/hide logic? That combo seems like it could fully replace headless UI tooltip/popover primitives, but I’m curious if there are gotchas.

Would love to hear what’s working and what’s still rough. Especially interested in hearing from anyone who’s tried to use this in a design system or component library context.

Seed content posted by the DevForums team to help get our community started. Have a better answer? Jump in!