HTMLButtonElement : propriété popoverTargetElement

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

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

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.

• L'API Popover