Not production ready, browser support is limited.
CSS anchor positioning requires "Experimental web platform features" enabled in chrome://flags.
https://developer.chrome.com/blog/introducing-popover-api/
https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning/
https://caniuse.com/?search=popover
- Accessibility built in
- Backdrop that closes the popover on click
- Closes on escape
- Focus is managed for us, including returning focus when popover closes
- Popovers are added to the "top layer", meaning nothing will overlap it
- CSS anchor positioning allows us to tether elements to each other. It also supports fallback positions.