position: absolute calculating coordinates listening for resize events handling scrolling checking whether the tooltip fits on screen and sometimes pulling in an entire positioning library
CSS Anchor Positioning lets us position one element relative to another directly in CSS.
CSS Anchor Positioning allows one element to act as an anchor and another element to position itself relative to that anchor.
Instead of calculating where they belong with JavaScript, we can now describe that relationship in CSS.
With Anchor Positioning, the browser understands the relationship between the two elements.
Instead of letting the tooltip disappear off-screen, CSS can define alternative positions using position fallbacks.
For example, the browser could try: Below the button Above the button Another fallback position
That means some positioning logic traditionally handled by JavaScript can move into CSS.
Keeping those responsibilities separate can make components much easier to maintain.
Keyboard users Focus behavior Appropriate semantics Whether information is available without a mouse Whether content disappears before users can interact with it Motion and zoom considerations
For some interfaces, native platform features such as the Popover API may also be worth considering alongside Anchor Positioning.
Modern CSS can simplify layout, but accessibility still needs to be part of the component design.
CSS Anchor Positioning has made significant progress across modern browsers, but browser support should still be checked against the requirements of your application.
For production applications supporting older browsers, progressive enhancement can be a good strategy.
That lets newer browsers take advantage of the feature while you maintain an appropriate fallback where necessary.
What I find most interesting about Anchor Positioning isn't just the new syntax.
Things we historically solved with JavaScript are increasingly becoming native browser capabilities.
But when the browser already understands layout, positioning, scrolling, and rendering, letting the browser handle those responsibilities can often be cleaner than recreating them ourselves.