La bibliothèque popper.js est un puissant moteur de positionnement pour les infobulles et les popovers. Aujourd’hui, nous allons nous concentrer sur la création d’un popover. Vous pouvez considérer un popover comme une infobulle qui peut contenir plus de contenu. Ce qui rend Popper si efficace, c’est sa capacité à générer des popovers qui conservent une position optimale sur la page lorsque son emplacement ou la fenêtre d’affichage du navigateur change. Il peut s’agir d’une solution UX et UI simple et efficace pour les développeurs Web. C’est probablement la raison pour laquelle elle est intégrée à d’autres bibliothèques populaires comme Boostrap et Material UI.
Dans ce tutoriel, nous allons exploiter la puissance de Popper.js dans Divi pour créer un popover positionné dynamiquement lors du clic sur un bouton. Cela permettra à quiconque de créer un popover à l’aide d’éléments Divi pour afficher le contenu qu’il souhaite lorsqu’il clique sur un bouton. De plus, le contenu du popover ajustera automatiquement sa position pour préserver la visibilité la plus idéale au fur et à mesure que l’utilisateur interagit avec votre page.
Voici une illustration du positionnement de ces popovers..
Pour ce faire, nous allons devoir utiliser des feuilles de style en cascade (CSS) et du langage Javascript personnalisés. Mais nous pouvons toujours nous appuyer sur les puissantes capacités de conception de Divi Builder pour créer un popover alimenté par Popper en utilisant n’importe quel élément Divi. Et l’exemple que nous allons construire dans ce tutoriel est un menu popover.
C’est parti !
Coup d’œil rapide
Voici un aperçu de l’exemple de menu popover que nous allons concevoir dans ce tutoriel.
Remarquez comment la position du popover change dynamiquement lorsque l’utilisateur fait défiler la page ou modifie la taille du navigateur.
Si vous cliquez sur le bouton alors qu’il se trouve tout en haut de la fenêtre du navigateur, le popover s’affiche sous le bouton, et si vous cliquez sur le bouton alors qu’il se trouve tout en bas de la fenêtre, le popover s’affiche au-dessus du bouton. Et si la fenêtre contextuelle est initialement positionnée à droite du bouton dans les grandes fenêtres, elle passera à une position supérieure ou inférieure dans les petites fenêtres.
Ne manquez pas non plus la petite flèche qui est également positionnée pour pointer dynamiquement vers sa référence (ou dans ce cas, le bouton).
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création d’un Popover avec Popper.js et Divi
Comme indiqué précédemment, nous allons utiliser popper.js dans Divi pour créer un popover positionné de manière dynamique (la boîte pop-up) qui s’affiche lorsque l’on clique sur la référence du popover (le bouton). Avec Divi, nous pouvons construire ces deux éléments (la boîte pop-up et le bouton) à l’aide du constructeur de Divi. Puis, plus tard, nous allons ajouter le code nécessaire pour marier les deux en parfaite harmonie de position.
nous allons désigner une rangée comme étant le popper (l’élément qui s’ouvre en cliquant sur le bouton). Ensuite, nous pouvons ajouter des modules à la ligne pour inclure le contenu que nous voulons afficher dans le popover du popper. Dans cet exemple
La section
Pour commencer, ajoutons un ID CSS personnalisé à la section ordinaire qui est prête par défaut. Ouvrez les paramètres de la section et ajoutez l’ID suivant :
Créer un popover Popper avec une rangée Divi
Ensuite, ajoutez une rangée d’une colonne à la section. Cette rangée deviendra notre élément Popper popover qui s’affiche lorsque vous cliquez sur un bouton.
Ouvrez les paramètres de la rangée et mettez à jour le style comme suit :
- Couleur d’arrière-plan : #333333
- Largeur de la gouttière : 2
- Largeur : 100
- Largeur maximale : 500px
- Rembourrage : 0px haut, 0px bas, 0px gauche, 0px droite
- Coins arrondis : 10px
Comme cette ligne deviendra notre élément popover, nous devons ajouter un ID CSS qui servira de sélecteur dans notre code. Nous devons également nous assurer que la visibilité reste sur overflow (elle est cachée par les coins arrondis).
Allez dans l’onglet avancé et mettez à jour les éléments suivants :
- CSS ID : popper-popup
- Débordement horizontal : visible
- Débordement vertical : visible
Ajouter du contenu à la rangée de popovers
C’est ici que la puissance de Divi brille. Nous pouvons ajouter le(s) module(s) que nous voulons à notre rangée pour remplir le popover avec le contenu que nous voulons en utilisant le Divi Builder pour les concevoir. Dans cet exemple, nous allons ajouter des boutons à la rangée pour servir de menu personnalisé qui apparaît dans le popover.
Pour commencer, ajoutez un module de boutons à la colonne de la rangée.
Maintenant, ajoutons rapidement du style à notre bouton. Mettez à jour les paramètres du bouton comme suit :
- Alignement du bouton : centre
- Utiliser des styles personnalisés pour le bouton : YES
- Largeur de la bordure du bouton : 1px
- Couleur de la bordure du bouton : #555555
- Rayon de la bordure du bouton : 10px
- Icône du bouton : voir la capture d’écran
- Marge : 20px haut, 20px bas, 20px gauche, 20px droite
- Rembourrage : 0.5em haut, 0.5em bas, 2em gauche, 2em droite
NOTE : Nous devons utiliser la marge sur les modules pour créer un espacement au lieu de compter sur le remplissage de la ligne (ou de la colonne) parce que nous allons ajouter une flèche (en utilisant un séparateur) qui doit être positionnée sur le bord de la ligne (avec une position absolue). Tout remplissage de ligne ou de colonne éloignera la flèche du bord.
Ensuite, ajoutez le code CSS personnalisé suivant à l’élément principal pour que le bouton occupe toute la largeur de la colonne/ligne :
display : block !important
Dupliquez maintenant le bouton deux fois (ou plus) pour ajouter quelques boutons supplémentaires à notre menu popover.
Création de la flèche du popover
Popper.js a un support intégré pour positionner une flèche avec le popover. Pour créer la flèche, ajoutez un nouveau séparateur sous le dernier bouton de notre rangée.
Dans les paramètres du séparateur, choisissez de ne pas afficher le séparateur.
Ensuite, sous l’onglet avancé, ajoutez l’ID CSS suivante :
Nous utiliserons plus tard un CSS externe personnalisé pour styliser et positionner la flèche.
Création du bouton popover (ou référence)
Les deux éléments clés d’un popover sont l’élément popover (ou popper) et la référence à laquelle le popover s’attache. Vous pouvez utiliser n’importe quel élément Divi comme référence qui génère le popover, mais pour cet exemple, nous allons utiliser un bouton.
Créer le bouton de référence du Popper
Avant de créer notre bouton, nous devons ajouter une nouvelle rangée d’une colonne sous notre rangée de popover.
Ajoutez ensuite un nouveau module de bouton à la ligne.
Mettez à jour les paramètres du bouton avec un style de base comme suit :
- Couleur du texte du bouton : #ffffff
- Couleur d’arrière-plan du bouton : #a043e8
- Largeur de la bordure du bouton : 0px
- Rayon de la bordure du bouton : 10px
Ensuite, ajoutez l’ID CSS nécessaire qui nous permettra de cibler et d’utiliser le bouton comme référence de notre popover par la suite :
Le code
Maintenant que notre popover et notre bouton sont terminés, nous sommes prêts à ajouter le code pour que la magie opère.
Pour ce faire, ajoutez un module de code sous le module du bouton de référence dans la deuxième rangée.
Il est important que le code se trouve en bas de la page pour que cela fonctionne.
Tout d’abord, nous allons ajouter le CSS.
Dans la zone de contenu du code, ajoutez les balises de style qui sont nécessaires pour envelopper le CSS dans le HTML. Ensuite, copiez et collez le CSS suivant entre les balises de style:
/*cacher et afficher le style de la popup*/
#popper-popup {
display : none ;
}
#popper-popup [data-popper-reference-hidden] {
visibilité : hidden ;
pointer-events : none ;
}
#popper-popup [show-popper] {
display : block ;
z-index : 9999 ;
}
/*maintenir le popup visible dans le Divi Builder pour l'édition*/
#et-fb-app #popper-popup {
display : block ;
}
/*construit la flèche ciblant le séparateur avec la classe 'popper-arrow'*/
#popper-arrow,
#popper-arrow::before {
position : absolute ;
width : 8px ;
height : 8px ;
background : #333333 ;
}
#popper-arrow {
visibilité : caché ;
}
#popper-arrow::before {
visibility : visible ;
contenu : "" ;
transform : rotate(45deg) ;
}
/*positionner la flèche en utilisant l'attribut data-popper-placement de popper.js*/
#popper-popup[data-popper-placement^="top"] #popper-arrow {
bottom : -4px ;
}
#popper-popup[data-popper-placement^="bottom"] #popper-arrow {
top : -4px ;
}
#popper-popup[data-popper-placement^="left"] #popper-arrow {
droite : -4px ;
}
#popper-popup[data-popper-placement^="right"] #popper-arrow {
left : -4px ;
}
/*cacher la flèche lorsque la référence est hors de la fenêtre d'affichage*/
#popper-popup[data-popper-reference-hidden] #popper-arrow::before {
visibility : hidden ;
}
Ensuite, nous devons accéder à la bibliothèque popper.js en ajoutant un script qui importe Popper.js depuis leur CDN (https://unpkg.com/@popperjs/[email protected]). Sous la balise de style de fin, collez le script suivant dans la zone de code.
Utilisez le src suivant dans une balise de script pour importer la bibliothèque :
src="https://unpkg.com/@popperjs/[email protected]"
Cela devrait ressembler à ceci :
Il est important d’importer Popper.js avant d’ajouter le code qui l’utilisera. Ainsi, après le script pointant vers Popper.js, ajoutez les balises script nécessaires pour envelopper le Javascript que nous devons ajouter. Collez ensuite le Javascript suivant entre les balises de script.
const popperButton = document.querySelector("#popper-button") ;
const popperPopup = document.querySelector("#popper-popup") ;
const popperSection = document.querySelector("#popper-section") ;
const popperArrow = document.querySelector("#popper-arrow") ;
let popperInstance = null ;
//créer une instance de popper
function createInstance() {
popperInstance = Popper.createPopper(popperButton, popperPopup, {
placement : "auto",//placement préféré du popper
modificateurs : [
{
name : "offset",//décale le popper de la référence/bouton
options : {
décalage : [0, 8],
},
},
{
name : "flip",//flippe le popper avec les placements autorisés
options : {
allowedAutoPlacements : ["droite", "gauche", "haut", "bas"],
rootBoundary : "viewport",
},
},
],
}) ;
}
//destruction de l'instance du popper
function destroyInstance() {
if (popperInstance) {
popperInstance.destroy() ;
popperInstance = null ;
}
}
//affiche et crée le popper
function showPopper() {
popperPopup.setAttribute("show-popper", "") ;
popperArrow.setAttribute("data-popper-arrow", "") ;
createInstance() ;
}
/cacher et détruire l'instance du popper
function hidePopper() {
popperPopup.removeAttribute("show-popper") ;
popperArrow.removeAttribute("data-popper-arrow") ;
destroyInstance() ;
}
//fait basculer l'attribut show-popper sur le popper pour le masquer ou l'afficher avec CSS
function togglePopper() {
if (popperPopup.hasAttribute("show-popper")) {
hidePopper() ;
} else {
showPopper() ;
}
}
//exécute la fonction togglePopper en cliquant sur la référence/bouton du popper
popperButton.addEventListener("click", function (e) {
e.preventDefault() ;
togglePopper() ;
}) ;
Voilà, c’est fait ! Nous avons terminé. Mais avant de voir le résultat final, examinons de plus près le code utilisé.
À propos du code
L’inspiration pour ce tutoriel vient du tutoriel Popper qui vous montre comment mettre en place et faire fonctionner une popup de base. Tout ce que j’ai fait, c’est modifier le code pour générer un popover au clic et utiliser des sélecteurs pour cibler les éléments Divi. Mis à part le constructeur unique createPopper qui crée l’instance du popper et les modificateurs (comme offset et flip) utilisés pour contrôler la logique de positionnement du popover, le code est entièrement du Javascript de base.
Si vous êtes intéressé par le fonctionnement de ce code, voici un aperçu rapide.
Le Javascript
Tout d’abord, vous devez importer popper.js avec leur CDN.
Ensuite, nous devons ajouter quelques variables qui seront utilisées pour cibler 4 sélecteurs clés, notamment l’élément popover du popper(#popper-popup), la référence/bouton du popper(#popper-button), la flèche du popper qui pointe vers la référence/bouton(#popper-arrow), et la limite du popover du popper pour éviter que le popover ne déborde en dehors du viewport le plus longtemps possible(#popper-section).
const popperButton = document.querySelector("#popper-button") ;
const popperPopup = document.querySelector("#popper-popup") ;
const popperSection = document.querySelector("#popper-section") ;
const popperArrow = document.querySelector("#popper-arrow") ;
Ensuite, nous laissons la variable popperInstance = null pour éviter que le popperInstance ne s’exécute jusqu’à ce que nous en ayons besoin.
let popperInstance = null ;
Ensuite, nous créons une instance de Popper qui va essentiellement créer le popover du popper en utilisant quelques modificateurs qui contrôlent la façon dont le popover va ajuster son placement sur la page.
//créer une instance de popper
function createInstance() {
popperInstance = Popper.createPopper(popperButton, popperPopup, {
placement : "auto",//placement préféré du popper
modificateurs : [
{
name : "offset",//décale le popper de la référence/bouton
options : {
décalage : [0, 8],
},
},
{
name : "flip",//flippe le popper avec les placements autorisés
options : {
allowedAutoPlacements : ["droite", "gauche", "haut", "bas"],
rootBoundary : "viewport",
},
},
],
}) ;
}
Ensuite, nous créons 4 fonctions pour détruire l’instance du popper lorsqu’il n’est pas actif, afficher le popper lorsqu’il est actif, cacher le popper lorsqu’il n’est pas actif, et basculer les fonctions d’affichage ou de masquage lorsque le popper possède l’attribut show-popper.
//destroy popper instance
function destroyInstance() {
if (popperInstance) {
popperInstance.destroy() ;
popperInstance = null ;
}
}
//affiche et crée le popper
function showPopper() {
popperPopup.setAttribute("show-popper", "") ;
popperArrow.setAttribute("data-popper-arrow", "") ;
createInstance() ;
}
/cacher et détruire l'instance du popper
function hidePopper() {
popperPopup.removeAttribute("show-popper") ;
popperArrow.removeAttribute("data-popper-arrow") ;
destroyInstance() ;
}
//fait basculer l'attribut show-popper sur le popper pour le masquer ou l'afficher avec CSS
function togglePopper() {
if (popperPopup.hasAttribute("show-popper")) {
hidePopper() ;
} else {
showPopper() ;
}
}
Enfin, nous basculons l’exécution du popper au clic en exécutant la fonction togglePopper() lors du clic sur la référence/bouton.
//exécution de la fonction togglePopper lors du clic sur la référence/bouton du popper
popperButton.addEventListener("click", function (e) {
e.preventDefault() ;
togglePopper() ;
}) ;
Le CSS
La fonctionnalité du popover repose sur un CSS personnalisé pour styliser les sélecteurs que nous avons utilisés dans le Javascript.
Le CSS le plus essentiel pour le popover comprend les extraits qui masquent et affichent le popper.
/*Cacher et afficher le style de la fenêtre contextuelle*/
#popper-popup {
display : none ;
}
#popper-popup [data-popper-reference-hidden] {
visibilité : hidden ;
pointer-events : none ;
}
#popper-popup [show-popper] {
display : block ;
z-index : 9999 ;
}
Ensuite, le reste du CSS est utilisé pour styliser et positionner la petite flèche contextuelle.
Voici le CSS qui construit la flèche à partir du diviseur Divi.
/*construire la flèche en ciblant le diviseur avec la classe 'popper-arrow'*/
#popper-arrow,
#popper-arrow::before {
position : absolute ;
width : 8px ;
height : 8px ;
background : #333333 ;
}
#popper-arrow {
visibilité : caché ;
}
#popper-arrow::before {
visibility : visible ;
contenu : "" ;
transform : rotate(45deg) ;
}
Et voici le CSS qui utilise l’attribut data-popper-placement intégré à Popper pour personnaliser la position de la flèche dans les quatre positions possibles, puis qui masque la flèche à l’aide de l’attribut data-popper-reference-hidden.
/*position de la flèche à l'aide de l'attribut data-popper-placement de popper.js*/
#popper-popup[data-popper-placement^="top"] #popper-arrow {
bottom : -4px ;
}
#popper-popup[data-popper-placement^="bottom"] #popper-arrow {
top : -4px ;
}
#popper-popup[data-popper-placement^="left"] #popper-arrow {
droite : -4px ;
}
#popper-popup[data-popper-placement^="right"] #popper-arrow {
left : -4px ;
}
/*cacher la flèche lorsque la référence est hors de la fenêtre d'affichage*/
#popper-popup[data-popper-reference-hidden] #popper-arrow::before {
visibility : hidden ;
}
CSS et JS finaux
Et voici un autre aperçu du code CSS et JS final :
/*cacher et afficher le style de la popup*/
#popper-popup {
display : none ;
}
#popper-popup [data-popper-reference-hidden] {
visibilité : hidden ;
pointer-events : none ;
}
#popper-popup [show-popper] {
display : block ;
z-index : 9999 ;
}
/*maintenir le popup visible dans le Divi Builder pour l'édition*/
#et-fb-app #popper-popup {
display : block ;
}
/*construit la flèche ciblant le séparateur avec la classe 'popper-arrow'*/
#popper-arrow,
#popper-arrow::before {
position : absolute ;
width : 8px ;
height : 8px ;
background : #333333 ;
}
#popper-arrow {
visibilité : caché ;
}
#popper-arrow::before {
visibility : visible ;
contenu : "" ;
transform : rotate(45deg) ;
}
/*positionner la flèche en utilisant l'attribut data-popper-placement de popper.js*/
#popper-popup[data-popper-placement^="top"] #popper-arrow {
bottom : -4px ;
}
#popper-popup[data-popper-placement^="bottom"] #popper-arrow {
top : -4px ;
}
#popper-popup[data-popper-placement^="left"] #popper-arrow {
droite : -4px ;
}
#popper-popup[data-popper-placement^="right"] #popper-arrow {
left : -4px ;
}
/*cacher la flèche lorsque la référence est hors de la fenêtre d'affichage*/
#popper-popup[data-popper-reference-hidden] #popper-arrow::before {
visibility : hidden ;
}
const popperButton = document.querySelector("#popper-button") ;
const popperPopup = document.querySelector("#popper-popup") ;
const popperSection = document.querySelector("#popper-section") ;
const popperArrow = document.querySelector("#popper-arrow") ;
let popperInstance = null ;
//créer une instance de popper
function createInstance() {
popperInstance = Popper.createPopper(popperButton, popperPopup, {
placement : "auto",//placement préféré du popper
modificateurs : [
{
name : "offset",//décale le popper de la référence/bouton
options : {
décalage : [0, 8],
},
},
{
name : "flip",//flippe le popper avec les placements autorisés
options : {
allowedAutoPlacements : ["droite", "gauche", "haut", "bas"],
rootBoundary : "viewport",
},
},
],
}) ;
}
//destruction de l'instance du popper
function destroyInstance() {
if (popperInstance) {
popperInstance.destroy() ;
popperInstance = null ;
}
}
//affiche et crée le popper
function showPopper() {
popperPopup.setAttribute("show-popper", "") ;
popperArrow.setAttribute("data-popper-arrow", "") ;
createInstance() ;
}
/cacher et détruire l'instance du popper
function hidePopper() {
popperPopup.removeAttribute("show-popper") ;
popperArrow.removeAttribute("data-popper-arrow") ;
destroyInstance() ;
}
//fait basculer l'attribut show-popper sur le popper pour le masquer ou l'afficher avec CSS
function togglePopper() {
if (popperPopup.hasAttribute("show-popper")) {
hidePopper() ;
} else {
showPopper() ;
}
}
//exécute la fonction togglePopper en cliquant sur la référence/bouton du popper
popperButton.addEventListener("click", function (e) {
e.preventDefault() ;
togglePopper() ;
}) ;
Visualisation du résultat final
Pour voir le résultat de cet exemple, nous devons créer un espace de défilement pour tester la magie du positionnement du popover popper.
Pour ce faire, ouvrez les paramètres de la section et ajoutez une marge comme suit :
- Marge : 80vh haut, 80vh bas
Voici à quoi ressemble la fonctionnalité sur un écran d’ordinateur plus grand.
Voici à quoi ressemble la fonctionnalité en ajustant la largeur du navigateur.
Remarquez comment la position du popover (et de la flèche) change dynamiquement lorsque l’utilisateur fait défiler la page ou modifie la taille du navigateur.
Voici également un codepen qui illustre la même fonctionnalité.
Réflexions finales
La création d’un popover popper.js dans Divi fait appel à une bonne dose de Javascript, mais le résultat en vaut la peine. Le positionnement dynamique du popover est un composant d’interface utilisateur très utile pour tout site Web. J’espère que cela vous sera utile pour tous vos besoins en matière de popover dans Divi à l’avenir.
J’ai hâte de lire vos commentaires.
