Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover below:

HTMLElement: togglePopover() method - Web APIs

Baseline 2024 *

Newly available

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.

togglePopover()
togglePopover(force)
togglePopover(options)

A boolean (force) or an options object:

force Optional

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.

options Optional

An object that can contain the following properties:

force Optional

A boolean; see the force description above.

source Optional

An HTMLElement 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 the source 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 also Popover accessibility features).
• The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using CSS anchor positioning. See Popover anchor positioning for more details.

true if the popup is open after the call, and false otherwise.

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

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

This is a slightly modified version of the Toggle 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 id="instructions">
  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 the popover 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 id="mypopover" 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 popover div 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 the h 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 a true or false 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.

• popover HTML global attribute
• Popover API

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4