HTML Popover reached Baseline Support

As of January 2025, the HTML popover element has reached Baseline "Newly Available" status. This means that the feature is now supported in all major browsers, including Chrome, Firefox, Safari, and Edge.

Therefore, it's an excellent time to explore how to use the `popover element in your projects.

Basic Usage

Creating a popover requires two elements: a trigger element and a content element.

Trigger: Element that users interact with to show the popover, such as a button or link. It has a popovertarget attribute that points to the content element.

Content: Contains the popover content. It has a popover attribute and an ID that matches the popovertarget attribute of the trigger element.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
 This works without any JavaScript!
</div>

It's as simple as this! For years, developers had to rely on JavaScript libraries or custom implementations to create popovers.

I'm happy to see this feature now available natively in all Baseline-supported browsers.

Animating the entry and exit

Making use of the newly arrived @starting-style CSS feature, we can easily animate the entry and exit of the popover.

[popover] {

    /* Exit state */
    transform: translateY(-1rem);
    opacity: 0.3;
    transition: all 0.3s ease-out allow-discrete;

    /* Open state */
    &:popover-open {
        transform: translateY(0);
        opacity: 1;
    }

    /* Before-Open state */
    @starting-style {
        &:popover-open {
            transform: translateY(-1rem);
            opacity: 0.3;
        }
    }
}

Benefits of the HTML Popover

The popover element is designed with accessibility in mind. It is fully keyboard accessible and works with screen readers out of the box.

Try it yourself: open the popover, then press the Esc key to close it.

As mentioned, it is now supported in all major browsers, so you can use it without worrying about compatibility issues.

Another benefit in my opinion is that you're using a native HTML element, which is always a good thing. It's more performant and easier to maintain than custom JavaScript solutions.

Below is a playground where you can experiment with the popover element 🛝.

Playground

import "./styles.css";

document.getElementById("app").innerHTML = `
<button popovertarget="popover-demo">Open Popover</button>

<div id="popover-demo" popover class="popover-wrapper">
    This works without any JavaScript!
</div>
`;

Browser Support

Thanks for reading and see you in the next one 👋