HTMLButtonElement : propriété popoverTargetElement
Baseline 2025Newly 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 propriété popoverTargetElement
de l'interface HTMLButtonElement
permet de lire et définir l'élément popover à contrôler via un bouton.
Elle est l'équivalent JavaScript de l'attribut HTML popovertarget
.
Valeur
Une référence vers un élément popover dans le DOM.
Exemples
L'action toggle
avec un popover automatique
Cet exemple montre l'utilisation de base de l'API Popover, en définissant un élément <div>
comme popover, puis en le définissant comme popoverTargetElement
d'un <button>
. L'attribut popover
est défini sur "auto"
, de sorte que le popover peut être fermé (« light-dismissed ») en cliquant en dehors de la zone du popover.
Tout d'abord, nous définissons un élément HTML <button>
que nous utiliserons pour afficher et masquer le popover, et un <div>
qui sera le popover. Dans ce cas, nous ne définissons pas l'attribut popovertargetaction
sur le <button>
ou l'attribut popover
sur le <div>
, car nous le ferons de manière programmatique.
<button id="toggleBtn">Afficher/masquer le popover</button>
<div id="monpopover">Ceci est le contenu du popover !</div>
Le code JavaScript récupère d'abord une référence vers les éléments <div>
et <button>
. Il définit ensuite une fonction pour vérifier la prise en charge du popover.
const popover = document.getElementById("monpopover");
const toggleBtn = document.getElementById("toggleBtn");
// Vérifie la prise en charge de l'API Popover.
function supportsPopover() {
return HTMLElement.prototype.hasOwnProperty("popover");
}
Si l'API Popover est prise en charge, le code définit l'attribut popover
de l'élément <div>
sur "auto"
et en fait la cible du popover du bouton de basculement. Nous définissons ensuite la popoverTargetAction
du <button>
sur "toggle"
. Si l'API Popover n'est pas prise en charge, nous changeons le contenu textuel de l'élément <div>
pour indiquer cela, et masquons le bouton de basculement.
if (supportsPopover()) {
// Définit l'élément <div> comme étant un popover automatique
popover.popover = "auto";
// Définit la cible popover du bouton comme étant le popover
toggleBtn.popoverTargetElement = popover;
// Définit comment le bouton change la visibilité du popover
toggleBtn.popoverTargetAction = "toggle";
} else {
popover.textContent = "L'API Popover n'est pas prise en charge.";
toggleBtn.hidden = true;
}
Note : Un élément popover est masqué par défaut, mais si l'API n'est pas prise en charge, il s'affichera de façon classique.
Vous pouvez essayer l'exemple ci-après. Affichez et masquez le popover en activant le bouton. Le popover "auto"
peut également être fermé facilement (« light-dismissed ») en cliquant en dehors des limites du popover.
must be provided
Spécifications
Specification |
---|
HTML # dom-popovertargetelement |
Compatibilité des navigateurs
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
popoverTargetElement | ||||||||||||
Implicit anchor reference via popoverTargetElement |
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.