HTMLInputElement : propriété popoverTargetElement

Une référence vers un élément popover dans le DOM.

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

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>

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;
}

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

• L'API Popover