HTMLElement : méthode showPopover()
Baseline
2024
*
Newly available
Depuis April 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.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
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. Si l'élément est déjà affiché, une erreur est levée.
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 (popover en anglais) 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 via 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 via 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-
Lancée si la fenêtre contextuelle est déjà affichée.
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="mypopover" 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 popover = document.getElementById("mypopover");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
popover.showPopover();
}
});
Spécifications
| Specification |
|---|
| HTML # dom-showpopover |