Playing with the native popover API, plus anchor positioning and starting-style. Note: iffy support on iOS Safari.
Anchored popovers
Howdy!
This should be accessible without any additional config
One thing I noticed: you seem to need transition-all on the popover content to get the exit transition working; transition-[properties]doesn't work, at least with Tailwind.
Here's a toast-y popover. In some countries, that's a meal. Regardless, you need to close this one manually rather than by clicking outside.
Toast popovers
Uh oh — I'm exposed!
I'm set to popover="manual" so only the button in here will close me.
The next one has a backdrop just to see how it works. But don't be fooled, it's not modal, nor does it lock scroll position or focus. In reality, you might use a <dialog> here if you're going native.
Backdrop
This is a native HTML popover. You can read up on MDN.
Click outside or press Esc to dismiss.
You can have some fun with the backdrops too. This one also requires an explicit close.
The Danger Zone
A use of the passive voice has occurred.
A backdrop click will do you no good here.