Introducing the popover API

This article is a translation of the original article “Introducing the popover API“.

I also run a telegram channelFrontend in a navy way”, where I talk about interesting things from the world of interface development.

Introduction

Pop-ups are ubiquitous on the web. You can see them in menus, radio buttons, and dialog boxes, which can appear as account settings, disclosure widgets, and product card previews. Despite the prevalence of these components, building them in browsers is still surprisingly cumbersome. You need to add scripts to manage focus, open and close states, available hooks for components, keyboard bindings for entering and exiting the experience, and that’s all before you start creating useful, unique, core functionality for your popup.

To solve this problem, a new set of declarative HTML APIs for creating popups is coming to browsers, starting with the popover API in Chromium 114.

popover attribute

Instead of managing all these complexities on your own, you can let the browser handle them with the popover attribute and the following set of functions. HTML popover features:

  • Promotion to the top layer. The popups will be displayed on a separate layer above the rest of the page, so you don’t have to fiddle with the z-index.

  • Light Diffusion Function. Clicking outside the popup area closes the popup and returns focus.

  • Default focus control. When opening a popup, the next tab stops inside the popup.

  • Available keyboard bindings. Pressing the esc key closes the popup and returns focus.

  • Available Component Bindings. The semantic connection of the popup element with the popup trigger.

Now you can create popups with all these features without using JavaScript. Three things are needed to create a basic popup:

  1. Attribute popover on the element containing the popup.

  2. id on the element containing the popup.

  3. popovertarget with meaning id popup on the element that opens the popup.

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

<div id="my-popover" popover>
  <p>I am a popover with more information.<p>
</div>

You now have a fully functional basic popover.

code pen

This popup can be used to show additional information or as a widget.

Defaults and overrides

By default, as in the previous code snippet, setting the popup with popovertarget means that the button or element that opens the popup will toggle it between open and closed states. However, you can still create explicit popups with popovertargetaction. This overrides the default toggle action. Options popovertargetaction include:

popovertargetaction="show": Shows a pop-up window. popovertargetaction="hide": Hides the popup window.

Using popovertargetaction="hide"you can create a “close” button inside the popup like in the following snippet:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden=”true”>❌</span>
    <span class="sr-only">Close</span>
</button>

code pen

Automatic and manual pop-ups

Attribute Usage popover itself is an abbreviation for popover="auto". When opening popover by default forces other automatic popovers to close, except for parent popovers. It can be closed with a click outside of its content or a close button.

On the other hand, setting popover=manual creates another type of popup: manual popup. They do not force-close elements of another type, and are not closed by clicking outside of its content. You must close them with a timer or an explicit close action. Popup types suitable for popover=manualare elements that appear and disappear but should not affect the rest of the page, such as a notification.

code pen

If you study the demo above, you will see that clicking outside the popup area does not turn off the popup highlight. Also, if other pop-up windows were open, they do not close.

To review the differences:

Pop-ups with popover=auto:

  • Forces other pop-up windows to close when opened.

  • Can be closed on click outside of content

Pop-ups with popover=manual:

  • Do not force close any other type of element.

  • Do not close on click outside of content. They need to be closed using a timer or an explicit close action

Popup Styling

So far, you’ve learned about basic popups in HTML. But there are also some nice styling options that come with popover. One of them is the ability to style ::backdrop.

In automatic popups, this is the layer directly below the top layer (on which the popup is located) that sits above the rest of the page. In the following example ::backdrop has a translucent color:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

code pen

By default, popups have a 2px border and are positioned in the center of the interface, but they are fully customizable! You can change the style of the popup like any other HTML element: change its size, background, position on the page, and so on.

Difference between popup and dialog box

It’s important to note that the popover attribute does not provide semantics on its own. While you can now create modal dialogs using popover=”auto”, there are a few key differences between the two:

Element dialogopened with dialog.showModal, is an experience that requires explicit user interaction to close the modal. Popover supports click-to-close outside of content. The dialog element is not. Dialog makes the rest of the page inactive, popover doesn’t.

code pen

The above demo is a semantic dialog with behavior popover. This means that the rest of the page is inactive and that the popup dialog gets the click-close behavior outside of the content. You can create an element dialog with behavior popoverusing the following code:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

The group is currently WhatWG and community OpenUI discuss the possibility of opening a dialog element with HTML ergonomics. This would be similar to popover, but would keep the dialog features listed earlier, such as making the rest of the page inactive. Follow these groups for the future popover, dialog and new elements such as selectmenu.

coming soon

Interactive entry and exit

Ability to animate properties, including animation display: none and animation of the top layer is not yet available in browsers. However, they are planned for the next version of Chromium, which will be released immediately after this release.

With the ability to animate properties, as well as using :popover-open And @starting-style, you can set styles before and after the change to ensure smooth transitions when opening and closing pop-ups. Let’s take the previous example. The animation on opening and closing looks much smoother:

code pen

Implementation of this feature is currently under development, but go to the codepen demo for the latest syntax and try it out with the #experimental-web-platform-features flag in Chrome Canary enabled.

Anchor positioning

Popups are great for placing an alert, modal, or notification depending on the viewport. But popups are also useful for menus, tooltips, and other elements that need to be positioned relative to other elements. This is where CSS anchoring comes in.

The following menu demo uses the popover API along with CSS anchor positioning in order for the popup menu #menu-items was always bound to its toggle trigger – the button #menu-toggle.

Setting up anchors is similar to setting up popups:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

You set up an anchor by assigning it id (in this example #menu-toggle) and then use anchor="menu-toggle" to connect two elements. Now you can use anchor() to style the popup menu. A centered popup menu can be styled like this:

#menu-items {
  bottom: calc(anchor(bottom));
  left: anchor(center);
  translate: -50% 0;
}

code pen

You now have a fully functional popup menu that’s tied to a toggle button and has all the built-in popup functionality without the need for JavaScript!

There are even more exciting new CSS anchoring features such as the expression @try to change the position of the menu depending on the available viewport space. This implementation depends on the case. Check out the Codepen demo above with the #experimental-web-platform-features flag enabled in Chrome Canary to learn more.

Conclusion

The Popover API is the first step in a series of new features designed to make building web applications easier to manage and more accessible by default. I can’t wait to see how you use popups!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *