HTMLButtonElement : propriété popoverTargetElement
==================================================

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é **`popoverTargetElement`** de l'interface `HTMLButtonElement` permet de lire et définir l'élément *popover* à contrôler via un bouton.

Elle est l'équivalent JavaScript de l'attribut HTML `popovertarget`.

Valeur
------

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

Exemples
--------

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

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.


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


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

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-popovertargetelement |

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

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

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

* L'API Popover