Newly availableNewly available. Verify your target environments before adopting.
Metadata and scripts Newly available

Popover

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.

Metadata and scripts

Overview

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.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
popover
114
114
125
17
114
17
popovertarget

Turns a element into a popover control button; takes the ID of the popover element to control as its value. Establishing a relationship between a popover and its invoker button using the popovertarget attribute has two additional useful effects: - The browser creates an implicit aria-details and aria-expanded relationship between popover and invoker, and…
114
114
125
17
114
17
popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control . Possible values are:
114
114
125
17
114
17
popovertarget

Turns an element into a popover control button; takes the ID of the popover element to control as its value. See the Popover API landing page for more details. Establishing a relationship between a popover and its invoker button using the popovertarget attribute has two additional useful effects: - The browser creates an implicit aria-details and…
114
114
125
17
114
17
popovertargetaction

Specifies the action to be performed on a popover element being controlled by a control . Possible values are:
114
114
125
17
114
17
DOM API
popoverTargetAction

The popoverTargetAction property of the HTMLButtonElement interface gets and sets the action to be performed ("hide", "show", or "toggle") on a popover element being controlled by a button.
114
114
125
17
114
17
popoverTargetElement

The popoverTargetElement property of the HTMLButtonElement interface gets and sets the popover element to control via a button.
114
114
125
17
114
17
beforetoggle_event

The beforetoggle event of the HTMLElement interface fires on a Popover_API or dialog element just before it is shown or hidden.
114
114
125
17
114
17
beforetoggle_event (popover elements)

`beforetoggle` event fires at popover elements
114
114
125
17
114
17
hidePopover

The hidePopover() method of the HTMLElement interface hides a popover element (i.e., one that has a valid popover attribute) by removing it from the top layer and styling it with display: none.
114
114
125
17
114
17
popover

The popover property of the HTMLElement interface gets and sets an element's popover state via JavaScript ("auto", "hint", or "manual"), and can be used for feature detection.
114
114
125
17
114
18.3
showPopover

The showPopover() method of the HTMLElement interface shows a Popover_API element (i.e., one that has a valid popover attribute) by adding it to the top layer.
114
114
125
17
114
17
showPopover (options source parameter)

`options.source` parameter
137
137
144
26
137
26
toggle_event (popover elements)

`toggle` event fires at popover elements
114
114
125
17
114
17
togglePopover

The togglePopover() method of the HTMLElement interface toggles a Popover_API element (i.e., one that has a valid popover attribute) between the hidden and showing states.
114
114
125
17
114
17
togglePopover (options source parameter)

`options.source` parameter
137
137
144
26
137
26
togglePopover (returns boolean)

Returns `true` or `false`
116
116
125
17
116
17
popoverTargetAction

The popoverTargetAction property of the HTMLInputElement interface gets and sets the action to be performed ("hide", "show", or "toggle") on a popover element being controlled by an input element of type="button".
114
114
125
17
114
17
popoverTargetElement

The popoverTargetElement property of the HTMLInputElement interface gets and sets the popover element to control via an input element of type="button".
114
114
125
17
114
17
ToggleEvent

The ToggleEvent interface represents an event that fires when a popover element is toggled between being shown and hidden.
114
114
120
17
114
17
newState

The newState read-only property of the ToggleEvent interface is a string representing the state the element is transitioning to.
114
114
120
17
114
17
oldState

The oldState read-only property of the ToggleEvent interface is a string representing the state the element is transitioning from.
114
114
120
17
114
17
ToggleEvent

The ToggleEvent() constructor creates a new ToggleEvent object.
114
114
120
17
114
17
CSS selector
popover

Support on popovers
114
114
125
17
114
17
Other
css.selectors.popover-open

`:popover-open`
114
114
125
17
114
17
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (18.3)
Implementation note
  • On iOS and iPadOS, popovers are not dismissed when the user taps outside of the popover area, see bug 267688.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (144)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 1984004.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 286575.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 286575.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (144)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 1984004.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 286575.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (137)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 383343310.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (26)
Implementation note
  • When using this option, the focus order doesn't change, so the popover does not become the next focus element. See bug 286575.

Syntax

HTML 
<button popovertarget="my-popover">Show Popover</button>
<div id="my-popover" popover>
  <p>This is the content of the popover.</p>
</div>

Live demo

basic popover

JS none. popover realize. with Popover attribute and popovertarget.

PreviewFullscreen

Manualmode. popover

auto disabledization.explicit to toggle. with popover=manual

PreviewFullscreen

::backdrop styling

popover. background styling.notification or modal style. useside.

PreviewFullscreen

Use cases

  • Using Popover

    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.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features