Popover API

HTML / CSS 🟡 Mid

Definition

API native HTML via l'attribut popover qui gère les popups, tooltips et menus sans JS. Le navigateur gère le positionnement dans la top layer, la fermeture au clic extérieur et l'accessibilité.

Analogie

Comme une bulle de dialogue dans une BD : elle apparaît au-dessus de tout et disparaît quand on passe à la case suivante.

Exemple de code

<button popovertarget="info">Aide</button>
<div id="info" popover>
  <p>Informations utiles ici</p>
</div>
<!-- S'ouvre/ferme automatiquement, -->
<!-- se ferme au clic extérieur -->

Cas d'usage

Créer des tooltips, dropdowns et menus contextuels sans dépendance JS ni bibliothèque de positionnement.

#core