Examples of Why The Web Needs Anchored Popovers
Examples of Why The Web Needs Anchored Popovers êŽë š
With popovers, you click a <button>, it opens a <whatever>. 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.