Back

Popover API

One of my favorite new things in HTML has landed this year. The Popover API. I thought the <dialog> element was already super handy, but I see myself using the Popover API even more now that it's fully supported across all browsers.
As of April 2024 this new API is available across all major desktop and mobile browsers. So right now, we can use these new features everywhere in updated browsers.
What makes this new API so awesome? So many times in frontend development we need to display a little bit of information to the user. It might be that file upload successfully, or something is missing on a form. These extra little information windows can really help add some clarity to what is happening on our pages. Modern frameworks and libraries have helped make these kinds of things pretty easy to bake in most of the time. But sometimes, the CSS can still be a little tricky to get right each time.
Here's a super basic example -
Basic Popover
The popover attribute can have two values: auto or manual. Auto is the default. Auto also allows popovers to be "light dismissed". This means that when you click anywhere outside of the popover, it will close.
There two differences to keep in mind when using the "manual" value on the popover attributes.
  1. More than one popover can be show on the screen.
  2. The "light dismissed" feature that comes with the auto value will no longer work. Since multiple manual popovers can be on the screen now.
Multiple Manual Popovers:
Basic Popover