ThetogglePopover() method of theHTMLElement interface toggles apopover element (i.e., one that has a validpopover attribute) between the hidden and showing states.

WhentogglePopover() is called on an element with thepopover attribute:

1. Abeforetoggle event is fired.
2. The popover toggles between hidden and showing:
   1. If it was initially showing, it toggles to hidden.
   2. If it was initially hidden, it toggles to showing.
3. Atoggle event is fired.

Syntax

togglePopover()togglePopover(force)togglePopover(options)

Parameters

A boolean (force) or an options object:

forceOptional

A boolean, which causestogglePopover() to behave likeshowPopover() orhidePopover(), except that it doesn't throw an exception if the popover is already in the target state.

• If set totrue, the popover is shown if it was initially hidden. If it was initially shown, nothing happens.
• If set tofalse, the popover is hidden if it was initially shown. If it was initially hidden, nothing happens.

optionsOptional

An object that can contain the following properties:

forceOptional

A boolean; see theforce description above.

sourceOptional

AnHTMLElement reference; programmatically defines the invoker of the popover associated with the toggle action, that is, its control element. Establishing a relationship between a popover and its invoker using thesource option has two useful effects:

• The browser places the popover in a logical position in the keyboard focus navigation order when shown. This makes the popover more accessible to keyboard users (see alsoPopover accessibility features).
• The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls usingCSS anchor positioning. SeePopover anchor positioning for more details.

Return value

true if the popup is open after the call, andfalse otherwise.

None (undefined) may be returned in older browser versions (seebrowser compatibility).

Examples

See thePopover API examples landing page to access the full collection of MDN popover examples.

Simple auto-popup

This is a slightly modified version of theToggle Help UI Popover Example.The example toggles a popover on and off by pressing a particular key on the keyboard (when the example window has focus).

The HTML for the example is shown below.This first element defines instructions on how to invoke the popup, which we need because popups are hidden by default.

<p>  Press "h" to toggle a help screen (select example window first).</p>

We then define a<div> element which is the popup.The actual content doesn't matter, but note that we need thepopover attribute to make the<div> into a popover so that it is hidden by default (or we could set this element in the JavaScript).

<div popover>  <h2>Help!</h2>  <p>You can use the following commands to control the app</p>  <ul>    <li>Press <ins>C</ins> to order cheese</li>    <li>Press <ins>T</ins> to order tofu</li>    <li>Press <ins>B</ins> to order bacon</li>  </ul></div>

The JavaScript for the example is shown below.First we check whether popovers are supported, and if they aren't we hide the popoverdiv so that it isn't displayed inline.

const instructions = document.getElementById("instructions");const popover = document.getElementById("mypopover");if (!Object.hasOwn(HTMLElement.prototype, "popover")) {  popover.innerText = "";  instructions.innerText = "Popovers not supported";}

If popovers are supported we add a listener for theh key to be pressed, and use that to trigger opening the popup.We also log whether the popup was open or closed after the call, but only if atrue orfalse was returned.

if (Object.hasOwn(HTMLElement.prototype, "popover")) {  document.addEventListener("keydown", (event) => {    if (event.key === "h") {      const popupOpened = popover.togglePopover();      // Check if popover is opened or closed on supporting browsers      if (popupOpened !== undefined) {        instructions.innerText +=          popupOpened === true ? `\nOpened` : `\nClosed`;      }    }  });}

You can test this out using the live example below.

Specifications

Browser compatibility

See also

• popover HTML global attribute
• Popover API