HTMLElement : méthode showPopover()

Baseline 2025
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La méthode showPopover() de l'interface HTMLElement affiche un élément popover (c'est-à-dire un élément qui a un attribut popover valide) en l'ajoutant à la couche supérieure.

Lorsque showPopover() est appelée sur un élément avec l'attribut popover qui est actuellement masqué :

  1. Un évènement beforetoggle est déclenché.
  2. Le popover est affiché.
  3. L'évènement toggle est déclenché.

Si l'élément est déjà visible, une erreur est lancée.

Syntaxe

js
showPopover()

Paramètres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateError DOMException

Lancée si le popover est déjà affiché.

Exemples

L'exemple suivant définit un comportement pour afficher un popover en appuyant sur une touche particulière du clavier.

HTML

html
<button popovertarget="mypopover">Basculer l'affichage du popover</button>
<p>
  Vous pouvez appuyer sur la touche <kbd>h</kbd> de votre clavier pour afficher
  le popover.
</p>
<div id="mypopover" popover="manual">Coucou</div>

JavaScript

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

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

Résultat

must be provided

Spécifications

Specification
HTML
# dom-showpopover

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
showPopover
source option
Experimental
Implicit anchor reference via source
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

Voir aussi