Popover attribute from the trenches

This new attribute is available cross-platform now, and is handy for a few UI web elements like modals, pop-ups, tool tips, etc...

Using the popover attribute is really simple. Add the attribute and an id to your target element, add the popovertarget to your trigger element, and you're on a roll.

There are a few interesting things to keep in mind :

• when a popover element is active, it's in the top-layer, no need to worry about z-index anymore 💪
• the popover attribute can have a value of auto (default) or manual
• styling the background of an opened popover element is done through applying styles to ::backdrop
• baked in ESC key listening to hide the popover 👍
• baked in light-dismiss, meaning clicking outside the target will hide the popover element and return focus 👍

Popover on div elements

In the below pen are the differences between auto and manual.

Popover on dialog elements

What really got me excited when I first started playing with the popover attribute is that I no longer had to handle the closing myself. So I immediately thought about using it on a dialog element, that could save a few lines of code each time!

As I quickly found out, there is a caveat. popover does not inert the rest of the page like regular dialog.showModal() does. And that is a deal braker since in most cases, dialog are meant to force the focus on their content and inert the rest of the DOM.

Still, a nice tool to have in a dev toolbelt!