HTMLElement : méthode togglePopover()
=====================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'API Popover