HTML Popover API guide

What the API does

The HTML Popover API gives browsers a native way to show overlay UI such as menus, tooltips and small panels. You mark an element with the popover attribute and open or close it from a trigger, and the browser handles the top-layer placement, focus and dismissal that used to require a library.

Because the popover renders in the browser's top layer, it sits above regular page content regardless of z-index, which removes the classic "this dropdown is hidden behind that section" battle. It also supports light dismiss: clicking outside the element or pressing Escape closes it without any script.

Popover markup

Mark an element as a popover and give a button a matching target:

<button popovertarget="menu">Open menu</button>

<div id="menu" popover>
  <p>This panel opens in the top layer and closes on click-outside or Escape.</p>
</div>

The popovertarget attribute ties the button to the popover's id. Add popovertargetaction="hide" or popovertargetaction="show" when a button should only open or only close rather than toggle. Programmatic control is still available through element.showPopover() and element.hidePopover() for cases that need script.

Support and a11y

The core Popover API is Baseline Widely Available, so Chrome, Edge, Firefox and Safari now ship it. This is a good place to state engine support precisely rather than wave at "all browsers": the base API works in Chrome and Edge 114 and later, Safari 17 and later, and Firefox 125 and later. Newer accents such as popover="hint" and auto-hide interest triggers are newer and roll out per engine, so feature-check before depending on them.

Accessibility is where to be careful:

• The element is not a dialog. Use the native <dialog> element when you need modal behaviour with focus trapping and a proper role, not a popover.
• Give the popover an appropriate semantic role, such as menu or tooltip, and a label, because popover alone conveys no meaning to assistive technology.
• Keep a keyboard-visible trigger. A button is a safe trigger; a non-focusable element is not.
• A popover for essential navigation must still work if a browser lacks the API, so provide a fallback or feature check for critical overlays.

A popover is a lighter-weight sibling of the dialog element; reach for dialog when a modal focus trap is required. Combine it with ARIA roles and semantic elements so the overlay stays usable, and handle any residual behaviour with event delegation rather than per-item handlers.