PopoverBaseline · Newly available

The popover HTML attribute creates an overlay to display content on top of other page content. Popovers can be shown declaratively using HTML, or using the showPopover() method.

Works in the latest version of every major browser, but older devices may not support it yet. Baseline since Jan 27, 2025.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–115Not supported

116+Supportedsince Aug 15, 2023

Current: 155

Edge

12–115Not supported

116+Supportedsince Aug 21, 2023

Current: 154

Firefox

1–124Not supported

125+Supportedsince Apr 16, 2024

Current: 157

Safari

1–16.6Not supported

17+Supportedsince Sep 18, 2023

Current: 27

MobileChrome Android

18–115Not supported

116+Supportedsince Aug 15, 2023

Current: 155

Firefox Android

4–124Not supported

125+Supportedsince Apr 16, 2024

Current: 157

Safari iOS

1–18.2Not supported

18.3+Supportedsince Jan 27, 2025

Current: 27

How to use

Every current browser supports this, but it only became Baseline on Jan 27, 2025. Use it as a progressive enhancement, or keep a fallback if you support older devices.

Example

HTML

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

<div id="menu" popover>
  <a href="/profile">Profile</a>
  <a href="/logout">Log out</a>
</div>

<!-- Light-dismiss, top layer and Esc-to-close come for free. -->

Feature detection

JS · check before using

if ("HTMLElement" in globalThis && "popover" in HTMLElement.prototype) {
  // HTMLElement.popover is available
}

Documentation (MDN)

Specification

html.spec.whatwg.org/multipage/popover.html ↗

Sub-features

Support for each part of the feature (25). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
HTMLButtonElement.popoverTargetAction	114	114	125	17	114	125	17
HTMLButtonElement.popoverTargetElement	114	114	125	17	114	125	17
HTMLElement.beforetoggle_event	114	114	125	17	114	125	17
HTMLElement.beforetoggle_event.popover_elements	114	114	125	17	114	125	17
HTMLElement.hidePopover	114	114	125	17	114	125	17
HTMLElement.popover	114	114	125	17	114	125	18.3
HTMLElement.showPopover	114	114	125	17	114	125	17
HTMLElement.showPopover.options_source_parameter	137	137	144	26	137	144	26
HTMLElement.togglePopover	114	114	125	17	114	125	17
HTMLElement.togglePopover.options_source_parameter	137	137	144	26	137	144	26
HTMLElement.togglePopover.returns_boolean	116	116	125	17	116	125	17
HTMLElement.toggle_event.popover_elements	114	114	125	17	114	125	17
HTMLInputElement.popoverTargetAction	114	114	125	17	114	125	17
HTMLInputElement.popoverTargetElement	114	114	125	17	114	125	17
ToggleEvent	114	114	120	17	114	120	17
ToggleEvent.ToggleEvent	114	114	120	17	114	120	17
ToggleEvent.newState	114	114	120	17	114	120	17
ToggleEvent.oldState	114	114	120	17	114	120	17
backdrop.popover	114	114	125	17	114	125	17
popover-open	114	114	125	17	114	125	17

Show 5 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
button.popovertarget	114	114	125	17	114	125	17
button.popovertargetaction	114	114	125	17	114	125	17
input.popovertarget	114	114	125	17	114	125	17
input.popovertargetaction	114	114	125	17	114	125	17
popover	114	114	125	17	114	125	17