popover

Description

L’attribut popover transforme n’importe quel élément en popover natif du navigateur — une couche flottante qui apparaît au-dessus du reste du contenu dans la top layer. Le navigateur gère automatiquement l’affichage/masquage, le focus, et la fermeture en cliquant à l’extérieur (pour auto).

Syntaxe

<!-- Le popover -->
<div popover id="mon-popover">Contenu du popover</div>

<!-- Déclencheur -->
<button popovertarget="mon-popover">Afficher</button>

Exemples

Popover automatique (se ferme en cliquant à l’extérieur) :

<button popovertarget="info" type="button">En savoir plus</button>

<div popover="auto" id="info" style="padding: 1rem; border-radius: 8px">
  <p>Informations supplémentaires.</p>
  <button popovertarget="info" popovertargetaction="hide" type="button">Fermer</button>
</div>

Popover manuel (contrôle explicite) :

<button onclick="document.getElementById('menu').showPopover()" type="button">
  Menu
</button>
<nav popover="manual" id="menu">
  <a href="/">Accueil</a>
  <a href="/contact">Contact</a>
</nav>

Attributs associés

Attribut	Description
popovertarget	ID du popover à contrôler (sur le déclencheur)
popovertargetaction	Action : toggle (défaut), show, ou hide

Notes

Top layer : les popovers s’affichent dans la top layer du navigateur — au-dessus de tout, y compris les éléments position: fixed et les <dialog>. Pas de problème de z-index.

auto vs manual : avec auto, un seul popover peut être ouvert à la fois (les autres se ferment), et cliquer à l’extérieur ferme le popover. Avec manual, ces comportements automatiques sont désactivés.

JavaScript optionnel : pour les cas simples (bouton → afficher/cacher), aucun JavaScript n’est requis grâce à popovertarget. L’API JavaScript (showPopover(), hidePopover(), togglePopover()) permet les cas avancés.