Popover API
Introduction 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
Voir la documentation officielle
Modaux et non-modaux 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 dialog est plus adapté.
Syntaxe 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 Les attributs
- popovertarget : l’identifiant de l’élément à afficher
- popovertargetaction : l’action à effectuer sur l’élément à afficher (toggle, show, hide)
- popover : l’élément à afficher (manual ou auto)
Démo notification Démo notification
Customisation CSS 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 Démo slider menu
Javascript Javascript
L’API Popover dispose également de quelques méthodes Javascript pour manipuler les popovers.