Popping Off With Popover

Posted: September 28, 2026

I don't mind JavaScript. I really don't. This post isn't about JavaScript though, it's about not using JavaScript!

Coming off a recent project I learned of a new HTML property for handling popover elements without JavaScript. If you guessed its called "popover" ...You are correct!

The "popover" global attribute is used to designated an element as a popover element. For a popover element to "pop over", a controlling element, such as a button or input, must exist and have the popovertarget attribute on it.

Let's say you have the following HTML somewhere in your template/HTML file.

<div class="popover" popover>
     <h1>Hello, World!</h1>
</div>

<button popovertarget="popover">Popover!</button>

The above code sets up a popover element, the div with the ID "popover", and the invoking element, the button. If you were to view this markup in a browser the only thing you would see is the button with the "Popover!" label. All popovers are hidden via display: none until their invoking element is triggered.

A "popover" property with no value is similar to passing the "auto" value to the popover attribute. Each value changes the default behavior of the popover. That value can be one of three values: auto, hint, manual.

Auto

Can be hidden/closed by clicking outside of the element or pressing the ESC (escape) key.

Will close other sibling "auto" popovers.

Hint

Can be hidden/closed by clicking outside of the element or pressing the ESC (escape) key.

Will not close other "auto" popovers, but will close other sibling "hint" popovers.

Manual

Can not be hidden/closed by clicking outside of the element or pressing the ESC (escape) key. "Manual" popovers must explicitly be displed and closed using declartive show/hide/toggle buttons or JavaScript.

Will display with other "manual" popovers."

Two of the three value options for popover provide functionality we used to need JavaScript for. Take a look at the CodePen below and notice the lack of JavaScript opening and closing the popover code above.

Pretty cool, right? Now, let's look at it in action.

See the Pen Popover by Trevor Jarrett (@derezed-the-decoder) on CodePen.

By just using two attributes and only need to explicitly pass one of them a value (the popovertarget attribute) we have now created popover/popup elements that we once needed JavaScript to do! According to CanIUse, popover is supported by all major browsers as of 2025.

But that's not all! Popover also provides a "backdrop" pseudo-element when the popover is active. If you click the invoking button in the CodePen, then inspect the ensuing popover element, you will see a ::backdrop element when the popover is active. When the ::backdrop element is rendered it automatically sizes to the viewport and is rendered beneath the top layer of the DOM - which just so happens to be where our popover gets placed. What can we use the psuedo-element for? Exactly what it's named! We can style it to be our popovers background.

Here's an updated CodenPen showing the same markup, but some added styles to achieve a modal/popup like effect.

See the Pen Popover - Backdrop by Trevor Jarrett (@derezed-the-decoder) on CodePen.

I highly recommend checking out MDN for a full reference on Popover and the Popover API. Some really neat stuff there in there. I wonder what other neat HTML/native browser functionality "things" I'm unaware of.