La propriétépopoverTargetAction de l'interfaceHTMLButtonElement permet de lire et de définir l'action à effectuer ("hide","show" ou"toggle") sur un élémentpopover contrôlé 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 unpopover affiché. Si vous essayez de masquer unpopover déjà masqué, aucune action ne sera effectuée.

"show"

Le bouton affichera unpopover masqué. Si vous essayez d'afficher unpopover déjà affiché, aucune action ne sera effectuée.

"toggle"

Le bouton basculera unpopover entre les états visible et masqué. Si lepopover est masqué, il sera affiché ; si lepopover est affiché, il sera masqué. 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 unpopover automatique

Cet exemple montre l'utilisation de base de l'API Popover avec la valeurtoggle définie pour la propriétépopoverTargetAction. L'attributpopover est défini sur"auto", de sorte que le popover peut être fermé (« light-dismissed ») en cliquant en dehors de la zone dupopover.

Tout d'abord, nous définissons un élément HTML<button> que nous utiliserons pour afficher et masquer lepopover, et un<div> qui sera lepopover. Dans ce cas, nous ne définissons pas l'attributpopovertargetaction sur le<button> ou l'attributpopover sur le<div>, car nous le ferons de manière programmatique.

<button>Afficher/masquer le popover</button><div>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 dupopover.

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'attributpopover de l'élément<div> sur"auto" et en fait la cible dupopover du bouton de basculement. Nous définissons ensuite lapopoverTargetAction 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 le bouton comme étant le contrôle du popover  toggleBtn.popoverTargetElement = popover;  // Définit que le bouton peut afficher/masquer le 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 lepopover en activant le bouton. Lepopover"auto" peut également être fermé facilement (« light-dismissed ») en cliquant en dehors des limites dupopover.

L'actionshow/hide avec unpopover manuel

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". Un popover manuel doit être fermé explicitement et ne peut pas être fermé facilement par un clic hors dupopover.

<button>Afficher le popover</button><button>Masquer le popover</button><div>Ceci est le contenu du popover !</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 un popover manuel  popover.popover = "manual";  // Définit les boutons comme étant les contrôles du popover  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;}

Le popover peut être affiché en cliquant sur le bouton « Afficher le popover » et masqué en cliquant sur le bouton « Masquer le popover ».

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Popover