Got a nice popover working for icons using CSS Anchor positioning!
You do it like this in #CSS
button {
anchor-name: --my-anchor;
}
.menu[popover="auto"] {
position: absolute;
position-anchor: --my-anchor;
position-area: bottom;
position-visibility: always;
position-try-fallbacks: flip-block, flip-inline;
}
I'm not entirely sure what all the parameters do yet, I need to dive into why it works next!
It should probably be queried for too
@supports (anchor-name: --anchor) { ... }