HTMLElement: togglePopover() method

force

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.

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

And now the JavaScript to wire up the functionality:

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

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.togglePopover();
  }
});

• Popover API