HTMLElement : méthode showPopover()
Baseline 2024
Nouvellement disponible
Depuis avril 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La méthode showPopover() de l'interface HTMLElement affiche une fenêtre contextuelle (c'est-à-dire un élément possédant 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é, un évènement beforetoggle est déclenché, suivi de l'affichage de la fenêtre contextuelle (popover en anglais), puis de l'évènement toggle.
showPopover()
showPopover(options)
Paramètres
optionsFacultatif-
Un objet qui peut contenir les propriétés suivantes :
sourceFacultatif-
Une référence
HTMLElement; définit par programmation l'élément déclencheur de la fenêtre contextuelle associée à l'action d'affichage, c'est-à-dire son élément de contrôle. Établir une relation entre une fenêtre contextuelle et son déclencheur avec l'optionsourcea deux effets utiles :- Le navigateur place la fenêtre contextuelle dans une position logique dans l'ordre de navigation au clavier lors de l'affichage. Cela rend la fenêtre contextuelle plus accessible aux utilisateur·ice·s du clavier (voir aussi Fonctionnalités d'accessibilité des fenêtres contextuelles).
- Le navigateur crée une ancre implicite entre les deux, ce qui facilite le positionnement des fenêtres contextuelles par rapport à leurs contrôles avec le positionnement d'ancre CSS. Voir Positionnement d'ancre pour les fenêtres contextuelles pour plus de détails.
Valeur de retour
Aucune (undefined).
Exceptions
InvalidStateErrorDOMException-
Levée si cette méthode est appelée alors qu'un autre fenêtre contextuelle est déjà en train d'être affichée ou masquée (par exemple, au sein d'un écouteur d'évènement
beforetoggle).
Exemples
L'exemple suivant permet d'afficher une fenêtre contextuelle en appuyant sur une touche particulière du clavier.
Tout d'abord, le code HTML :
<div id="ma-fenetre" popover>
<h2>Aide !</h2>
<p>
Vous pouvez utiliser les commandes suivantes pour contrôler
l'application :
</p>
<ul>
<li>Appuyez sur <ins>C</ins> pour commander du fromage</li>
<li>Appuyez sur <ins>T</ins> pour commander du tofu</li>
<li>Appuyez sur <ins>B</ins> pour commander du bacon</li>
</ul>
<hr />
<ul>
<li>
Dites « Service » pour appeler le serveur robot et prendre votre
commande
</li>
<li>Dites « Échap » pour activer le siège éjectable</li>
</ul>
</div>
Ensuite, le JavaScript pour relier la fonctionnalité :
const fenetreContextuelle = document.getElementById("ma-fenetre");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
fenetreContextuelle.showPopover();
}
});
Spécifications
| Spécification |
|---|
| HTML # dom-showpopover |