HTMLElement: togglePopover() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The togglePopover() method of the HTMLElement interface toggles a popover element (i.e. one that has a valid popover attribute) between the hidden and showing states.

When togglePopover() is called on an element with the popover attribute:

  1. A beforetoggle 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. A toggle event is fired.





A boolean, which causes togglePopover() to behave like showPopover() or hidePopover(), except that it doesn't throw an exception if the popover is already in the target state.

  • If set to true, the popover is shown if it was initially hidden. If it was initially shown, nothing happens.
  • If set to false, the popover is hidden if it was initially shown. If it was initially hidden, nothing happens.

Return value

None (undefined).


The following example provides functionality to toggle a popover on and off by pressing a particular key on the keyboard.

First, some HTML:

<div id="mypopover">

  <p>You can use the following commands to control the app</p>

    <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>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>

And now the JavaScript to wire up the functionality:

const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {


HTML Standard
# dom-togglepopover

Browser compatibility

BCD tables only load in the browser

See also