Popover API

Publié le :

Introduction

Les popovers sont des éléments qui permettent d’afficher des informations contextuelles. Ils sont souvent utilisés pour afficher des informations supplémentaires.

Cette nouvelle API permet de créer des popovers sans avoir à utiliser Javascript

Modaux et non-modaux

Les éléments modaux sont des éléments qui bloquent l’interaction avec le reste de la page. Les éléments non-modaux sont des éléments qui permettent de continuer à interagir avec le reste de la page.

Les popovers sont des éléments non-modaux, si on souhaite créer des éléments modaux, l’élément est plus adapté.

Syntaxe

La syntaxe est assez simple. Il suffit d’ajouter quelques attributs sur l’élément actionnable et sur l’élément à afficher.

<button popovertarget="alert-success" popovertargetaction="toggle">
  Fire alert success
</button>

<div id="alert-success" popover="" role="alert">Success : You win !</div>

Remarque

Pour gérer l’apparition et la disparition du popover, le navigateur bascule entre “block” et “none” de la propriété display. Pour animer l’apparition et la disparition, il est possible d’utiliser la règle @starting-style.

Les attributs

Démo notification

Customisation CSS

Il est possible de personnaliser le style des popovers en fonction de leur état.

l’état d’ouverture est géré par la pseudo-class :popover-open.

[popover]:popover-open {
  background-color: white;
}

Comme pour les dialog, on peut personnaliser le fond avec le pseudo-element ::backdrop.

[popover]::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Démo slider menu

Javascript

L’API Popover dispose également de quelques méthodes Javascript pour manipuler les popovers.

Démo notification Javascript

Liens