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.

html
<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.

js
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.

js
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

Voir aussi