Popover
Petite bulle informative destinée à apporter des précisions sur un élément. Elle se déclenche au passage de la souris (ou au tap, sur appareils tactiles)
Code de base
L'élément déclencheur doit être situé au sein du composant. Le contenu de la Popover (.popover-content) se trouve directement après l'élément déclencheur. Aucun Javascript n'est nécessaire pour ce fonctionnement.
Aperçu
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, ea enim ?
Aperçu avec un fond
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, ea enim ?
Popover active
Pour forcer l'affichage de la Popover, utilisez .is-popover-active
Aperçu
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, ea enim ?
Positionnement
Placée par défaut au-dessus de son élement, vous pouvez changer son positionnement via .is-popover-bottom, .is-popover-right ou .is-popover-left
Aperçu
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, ea enim ?
La résolution de l'internaute peut rendre le positionnement complexe et nécessiter des classes spécifiques selon les breakpoints : suffixez simplement avec le breakpoint souhaité pour changer le positionnement sur un breakpoint spécifique (par exemple .is-popover-left-mobile ou .is-popover-bottom-tablet-only).
Flèche
Par défaut, la flèche est au centre de la Popover. Vous pouvez utiliser .is-arrow-start ou .is-arrow-end pour changer sa position.
Aperçu
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, ea enim ?
Vous pouvez cumuler les règles de positionnement de la Popover et de la flèche en cumulant les classes CSS évoqués précédemment.