HTMLElement : méthode togglePopover()

La méthode togglePopover() de l'interface HTMLElement permet d'alterner les états d'un élément popover (c'est-à-dire un élément qui a un attribut popover valide) entre l'état masqué et l'état affiché.

Lorsque togglePopover() est appelée sur un élément avec l'attribut popover :

  1. Un évènement beforetoggle est déclenché.
  2. Le popover alterne entre l'état masqué et affiché :
    • S'il était initialement affiché, il est masqué.
    • S'il était initialement masqué, il est affiché.
  3. Un évènement toggle est déclenché.

Syntaxe

js
togglePopover(force)

Paramètres

force

Un booléen, qui fait que togglePopover() se comporte comme showPopover() ou hidePopover(), à l'exception qu'elle ne lance pas d'exception si le popover est déjà dans l'état cible.

  • S'il est défini sur true, le popover est affiché s'il était initialement masqué. S'il était initialement affiché, rien ne se passe.
  • S'il est défini sur false, le popover est masqué s'il était initialement affiché. S'il était initialement masqué, rien ne se passe.

Valeur de retour

true si le popup est ouvert après l'appel, et false sinon.

Note : undefined peut être retournée dans d'anciennes versions de navigateurs (voir compatibilité des navigateurs).

Exemples

Note : Voir la page d'exemples de l'API Popover pour accéder à la collection complète des exemples de MDN relatifs aux popovers.

L'exemple qui suit est une version légèrement modifiée de l'exemple d'interface d'aide. L'exemple affiche/masque un popover en appuyant sur une touche particulière du clavier (lorsque la fenêtre de l'exemple a le focus).

HTML

Le HTML de l'exemple est affiché ci-après. Le premier élément fournit les instructions sur la façon d'invoquer le popup, ce dont nous avons besoin, car les popups sont masqués par défaut.

html
<p id="instructions">
  Appuyez sur <kbd>h</kbd> pour afficher/masquer une fenêtre d'aide
  (sélectionnez d'abord la fenêtre de l'exemple).
</p>

Nous définissons ensuite un élément <div> qui est le popup. Le contenu réel n'a pas d'importance, mais notez que nous avons besoin de l'attribut popover pour faire du <div> un popover afin qu'il soit masqué par défaut (nous pourrions également définir cet élément dans le JavaScript).

html
<div id="mypopover" popover>
  <h2>Aides</h2>

  <p>Vous pouvez utiliser les touches suivantes pour contrôlez l'application</p>

  <ul>
    <li>Pressez la touche <ins>C</ins> pour commander du fromage</li>
    <li>Pressez la touche <ins>T</ins> pour commander du tofu</li>
    <li>Pressez la touche <ins>B</ins> pour commander du bacon</li>
  </ul>
</div>

JavaScript

Premièrement, nous vérifions que le navigateur prend en charge les popovers. Si ce n'est pas le cas, nous masquons la div popover afin qu'elle ne soit pas visible par défaut.

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

if (!HTMLElement.prototype.hasOwnProperty("popover")) {
  popover.innerText = "";
  instructions.innerText =
    "Votre navigateur ne prend pas en charge les popovers.";
}

Si les popovers sont supportés, nous ajoutons un gestionnaire d'évènement qui vérifie si la touche h est pressée, et si c'est le cas nous changeons l'état du popover. Nous affichons également l'état du popover après l'évènement, mais uniquement si les valeurs true ou false ont été retournées.

js
if (HTMLElement.prototype.hasOwnProperty("popover")) {
  document.addEventListener("keydown", (event) => {
    if (event.key === "h") {
      const popupOpened = popover.togglePopover();

      // Vérifie si le popover est ouvert ou fermé
      // sur les navigateurs qui le prennent en charge
      if (popupOpened !== undefined) {
        instructions.innerText += popupOpened === true ? `\nOuvert` : `\nFermé`;
      }
    }
  });
}

Résultat

Spécifications

Specification
HTML Standard
# dom-togglepopover

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi