👋

Popover API

The Popover API is available in every major browser starting in April 2024. It enables creating native popovers, popups, dialogs, tooltips, and similar UI components.

Usage

Add the popover attribute to elements to convert them into popovers. 

<article popover>…</article>

But now we need a way to open it.

Open with HTML

Add popovertarget to a button with the popover's ID. 

<button type="button" popovertarget="a-popover">Open</button>

<article id="a-popover" popover>…</article>

Open with Javascript

Use the showPopover method.

Popover

The background is styled using the ::backdrop pseudo-element.

Try changing the blur or color.

Closing Popups

By default, a popover can be closed with the keyboard or by clicking outside of it.

Overriding the Defaults

Use popover="manual" to prevent default behavior. Add popovertargetaction="hide" to a button for closing the popover. 

<dialog id="manual-popover" popover="manual">
  …
  <button type="button"
    popovertarget="manual-popover"
    popovertargetaction="hide"
  >
    X
  </button>
</dialog>

Manual Popover

While you're here, try clicking on buttons or links behind this popup.

⚠️ Interactive Backgrounds

Backgrounds remain interactive with popover. Use a <dialog> as a modal to make the background non-interactive.

Nothing will happen when clicking on buttons behind this dialog.

Example Components

Snackbar, Toast, and Notifications

The popover API simplifies creating notifications like toasts and snackbar components with minimal CSS.

🎉It works

🧪 Tooltip

The popover API and the new CSS anchor positioning allow easy creation of tooltips. 

<span
  onmouseenter="document.querySelector('.tooltip').showPopover()"
  onmouseleave="document.querySelector('.tooltip').hidePopover()"
  style="anchor-name: --a-name"
>
  …
</span>

<div
  class="tooltip"
  popover="manual"
  style="position-anchor: --a-name; inset-area: top; margin: 0;"
>
  Tooltip
</div>

Hover over me.

Tooltip

Further Reading