HTMLInputElement : propriété popoverTargetElement
La propriété popoverTargetElement
de l'interface HTMLInputElement
permet de lire et définir l'élément popover à contrôler via un élément <input>
avec l'attribut type="button"
.
Elle est l'équivalent JavaScript de l'attribut HTML popovertarget
.
Valeur
Une référence vers un élément popover dans le DOM.
Exemples
Cet exemple montre une utilisation simple l'API Popover, en définissant un élément <div>
comme popover, puis en le définissant comme popoverTargetElement
d'un <input type="button">
. L'attribut popover
est défini sur "auto"
, de sorte que le popover peut être fermé en cliquant en dehors de sa zone (light-dismissed).
HTML
Tout d'abord, nous définissons un élément HTML <input type="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 l'élément <input type="button">
ou l'attribut popover
sur l'élément <div>
, car nous le ferons de manière programmatique.
<input id="toggleBtn" type="button" value="Afficher/masquer le popover" />
<div id="mypopover">Ceci est le contenu du popover !</div>
JavaScript
Le code JavaScript récupère d'abord une référence vers les éléments <div>
et <input>
. Il définit ensuite une fonction pour vérifier la prise en charge du popover.
const popover = document.getElementById("mypopover");
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 <input type="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.
Résultat
Vous pouvez essayer l'exemple ci-après. Affichez et masquez le popover en activant le bouton. Un tel popover automatique peut également être fermé en cliquant en dehors de ses limites (light-dismissed).
Spécifications
Specification |
---|
HTML Standard # dom-popovertargetelement |
Compatibilité des navigateurs
BCD tables only load in the browser