Examples of Why The Web Needs Anchored Popovers – Frontend Masters Boost

With popovers, you click a , it opens a . No JavaScript is required. It opens on the “top layer” so it will always be visible no matter what. You can click away and it closes and/or offer your own close mechanics. The two elements can be wherever makes the most sense in the DOM without restriction. With CSS anchor positioning, the popover that opens can be positioned perfectly and safely next to whatever it needs to be again without DOM restrictions. It’s the best.

What might use this potent combo? Everything.

These type of menus on GitHub would be great.

A similar type of header dropdown menu on our new version of CodePen we’re working on would love it, which sometimes have nested tooltips I’m crossing my fingers work well.

For flyout menus like this it will be nice to have particularly for the save positioning. Wouldn’t it be nice to have that menu open more “upwards” instead if there wasn’t room before the bottom of the browser window below?

Maybe the DOM positioning matters less above as perhaps it actually makes sense that the submenu is, say, a nested list, which already helps with positioning. That’s OK, sometimes you need extra help and sometimes you don’t, it still nice to use a unified system.

There is about a dozen popups like this in the Riverside.fm interface that would all benefit from positioned popovers. Wouldn’t it be nice to move elements around, even dramatically in response to screen sizes and aspect ratios, and never worry that menu popup positioning would get donked up?

Really anything app-like, like Figma, would benefit from being able to show menus without additional JavaScript having to run calculations and always be watching for window size changes in order to position things correctly, to say nothing of z-index battles that, when lost, can render menus entirely hidden.

Designers will surely enjoy having being able to think in terms of alignment. Where should this popup hang off of? Straight off the right side? Pushed down then to the right? Centered below it? We’ll have lots of positioning options that work great with pretty simple keywords that have smart side effects.

What’s inside a popup can be complex sometimes, involving forms, multiple lists, lots of interactive elements, etc. Not being forced to put that in the same exact DOM area as the button that triggers is might be beneficial for accessibility, not to mention the help handling moving focus in and out of that area properly.

There are a lot of menu examples above, but I think there are just as many examples out there of “styled tooltips” which is something we’ve never properly been able to do without lots of fancy dancing JavaScript.

It’s telling you, the web is chock-a-block with these things.