La propriétépopoverTargetAction de l'interfaceHTMLButtonElement permet d'obtenir et de définir l'action à effectuer ("hide","show" ou"toggle") sur une fenêtre contextuelle (popover en anglais) contrôlée par un bouton.

Elle reflète la valeur de l'attribut HTMLpopovertargetaction.

Valeur

Une valeur énumérée. Les valeurs possibles sont :

"hide"

Le bouton masquera une fenêtre contextuelle (popover en anglais) affichée. Si vous essayez de masquer une fenêtre contextuelle déjà masquée, aucune action ne sera effectuée.

"show"

Le bouton affichera une fenêtre contextuelle (popover en anglais) masquée. Si vous essayez d'afficher une fenêtre contextuelle déjà affichée, aucune action ne sera effectuée.

"toggle"

Le bouton basculera une fenêtre contextuelle (popover en anglais) entre affichée et masquée. Si la fenêtre contextuelle est masquée, elle sera affichée ; si elle est affichée, elle sera masquée. SipopoverTargetAction n'est pas défini,"toggle" est l'action par défaut qui sera effectuée par le bouton de contrôle.

Exemples

L'actiontoggle avec une fenêtre contextuelle automatique

Cet exemple montre l'utilisation basique de l'API des fenêtres contextuelles (popover en anglais) avec la valeur"toggle" définie pour la propriétépopoverTargetAction.L'attributpopover est défini sur"auto", donc la fenêtre contextuelle peut être fermée (« light-dismissed ») en cliquant en dehors de la zone de la fenêtre contextuelle.

On définit d'abord un élément HTML<button> qui servira à afficher et masquer la fenêtre contextuelle, et un<div> qui sera la fenêtre contextuelle.Dans ce cas, on ne définit pas l'attribut HTMLpopovertargetaction sur le<button> ni l'attributpopover sur le<div>, car cela sera fait par programmation.

<button>Afficher/masquer la fenêtre</button><div>Ceci est le contenu&nbsp;!</div>

Le code JavaScript commence par récupérer une référence vers les éléments<div> et<button>.Il définit ensuite une fonction pour vérifier la prise en charge de l'API des fenêtres contextuelles.

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 des fenêtres contextuelles est prise en charge, le code définit l'attributpopover de l'élément<div> à"auto" et fait de ce<div> la cible du bouton de bascule.On définit ensuite la propriétépopoverTargetAction du<button> à"toggle".Si l'API des fenêtres contextuelles n'est pas prise en charge, on modifie le texte du<div> pour l'indiquer et on masque le bouton de bascule.

if (supportsPopover()) {  // Définit l'élément <div> comme étant une fenêtre contextuelle automatique  popover.popover = "auto";  // Définit le bouton comme étant le contrôle de la fenêtre contextuelle  toggleBtn.popoverTargetElement = popover;  // Définit que le bouton peut afficher/masquer la fenêtre contextuelle  toggleBtn.popoverTargetAction = "toggle";} else {  popover.textContent = "L'API Popover n'est pas prise en charge.";  toggleBtn.hidden = true;}

Vous pouvez essayer l'exemple ci-dessous.Affichez et masquez la fenêtre contextuelle en cliquant sur le bouton.La fenêtre contextuelle"auto" peut aussi être « light-dismissed » en cliquant en dehors du texte de la fenêtre contextuelle.

L'actionshow/hide avec une fenêtre contextuelle manuelle

Cet exemple montre comment utiliser les valeurs"show" et"hide" de l'attributpopoverTargetAction.

Le code est quasiment identique à l'exemple précédent, sauf qu'il y a deux<button> et que lepopover est défini avec la valeur"manual". Une fenêtre contextuelle manuelle doit être fermée explicitement et ne peut pas être fermée facilement par un clic hors de la fenêtre contextuelle.

<button>Afficher la fenêtre</button><button>Masquer la fenêtre</button><div>Ceci est le contenu de la fenêtre&nbsp;!</div>

function supportsPopover() {  return HTMLElement.prototype.hasOwnProperty("popover");}const popover = document.getElementById("monpopover");const showBtn = document.getElementById("showBtn");const hideBtn = document.getElementById("hideBtn");const popoverSupported = supportsPopover();if (supportsPopover()) {  // Définit l'élément <div> comme étant une fenêtre contextuelle manuelle  popover.popover = "manual";  // Définit les boutons comme étant les contrôles de la fenêtre contextuelle  showBtn.popoverTargetElement = popover;  hideBtn.popoverTargetElement = popover;  // Définit les actions cibles comme étant afficher/masquer  showBtn.popoverTargetAction = "show";  hideBtn.popoverTargetAction = "hide";} else {  popover.textContent = "L'API popover n'est pas prise en charge.";  showBtn.hidden = true;  hideBtn.hidden = true;}

La fenêtre contextuelle peut être affichée en cliquant sur le bouton « Afficher la fenêtre » et masquée en cliquant sur le bouton « Masquer la fenêtre ».

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Popover