HTMLButtonElement : propriété popoverTargetAction
=================================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
La propriété **`popoverTargetAction`** de l'interface `HTMLButtonElement` permet de lire et de définir l'action à effectuer (`"hide"`, `"show"` ou `"toggle"`) sur un élément *popover* contrôlé par un bouton.

Elle reflète la valeur de l'attribut HTML `popovertargetaction`.

Valeur
------

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

`"hide"`

Le bouton masquera un *popover* affiché. Si vous essayez de masquer un *popover* déjà masqué, aucune action ne sera effectuée.

`"show"`

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

`"toggle"`

Le bouton basculera un *popover* entre les états visible et masqué. Si le *popover* est masqué, il sera affiché ; si le *popover* est affiché, il sera masqué. Si `popoverTargetAction` n'est pas défini, `"toggle"` est l'action par défaut qui sera effectuée par le bouton de contrôle.

Exemples
--------

### L'action `toggle` avec un *popover* automatique

Cet exemple montre l'utilisation de base de l'API Popover avec la valeur `toggle` définie pour la propriété `popoverTargetAction`. 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.


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


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


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


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

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'action `show`/`hide` avec un *popover* manuel

Cet exemple montre comment utiliser les valeurs `"show"` et `"hide"` de l'attribut `popoverTargetAction`.

Le code est quasiment identique à l'exemple précédent, sauf qu'il y a deux `<button>` et que le *popover* 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 du *popover*.


```html
<button id="showBtn">Afficher le popover</button>
<button id="hideBtn">Masquer le popover</button>
<div id="monpopover">Ceci est le contenu du popover !</div>
```



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

| Specification |
| --- |
| HTML Standard # dom-popovertargetaction |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'API Popover