Popover is a new API that allows creating popover UI easily. Before this API, you had to create elements, position them and handle how you show and hide them with JS.

The Popover API guarantees three things:

• Popovers always appear on top of other page content.
• When clicking elsewhere on the page, popovers close.
• Only one popover can be open at a time.

The way to use them is simple. You add a popover attribute to an element and then use the popovertarget attribute to show it:

<div popover id="mypopover">I'm a popover</div>
<button popovertarget="mypopover">Click me</button>

You can style the popover with CSS ([popover] selector), use JS to show and hide it, and more.

Here you can see it in action and as usual you have some links to learn more about it: