Popover API

Publié le : 26 juin 2024

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

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

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>

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

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.

• hidePopover()
• showPopover()
• togglePopover()

Démo notification Javascript

Liens

• https://open-ui.org/components/popover.research.explainer/
• https://blog.logrocket.com/comparing-popover-api-dialog-element/