Documentation - Popover.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Popover
Marssel propose un système de popover pour afficher du contenu contextuel dans une fenêtre flottante au clic sur un élément déclencheur. Idéal pour afficher des informations détaillées, formulaires ou actions supplémentaires.
Configuration de base
Le PopoverManager est automatiquement initialisé :
const marssel = new Marssel();
// Le PopoverManager est prêt à l'emploiStructure HTML
Un popover se compose d'un déclencheur et d'un contenu :
Titre du popover
Contenu du popover avec des informations supplémentaires.
<!-- Déclencheur -->
<button data-popover-trigger="popover-1">
Afficher le popover
</button>
<!-- Popover -->
<div id="popover-1" data-popover>
<h4>Titre du popover</h4>
<p>Contenu du popover avec des informations supplémentaires.</p>
</div>Directions disponibles
Positionnez le popover avec data-popover-direction :
<!-- En bas (défaut) -->
<button data-popover-trigger="popover-bottom">Bottom</button>
<div id="popover-bottom" data-popover data-popover-direction="bottom">
Contenu en bas
</div>
<!-- En haut -->
<button data-popover-trigger="popover-top">Top</button>
<div id="popover-top" data-popover data-popover-direction="top">
Contenu en haut
</div>
<!-- À gauche -->
<button data-popover-trigger="popover-left">Left</button>
<div id="popover-left" data-popover data-popover-direction="left">
Contenu à gauche
</div>
<!-- À droite -->
<button data-popover-trigger="popover-right">Right</button>
<div id="popover-right" data-popover data-popover-direction="right">
Contenu à droite
</div>API JavaScript
Contrôlez les popovers programmatiquement :
// Récupérer un popover
const trigger = document.querySelector('[data-popover-trigger="popover-1"]');
const popoverData = marssel.popoverManager.popovers.get(trigger);
// Ouvrir un popover
marssel.popoverManager.openPopover(popoverData);
// Fermer le popover actif
marssel.popoverManager.closeActivePopover();
// Basculer un popover
marssel.popoverManager.togglePopover(trigger);Personnalisation des styles
Stylez vos popovers avec les classes Marssel :
<div id="custom-popover"
data-popover
data-popover-direction="bottom"
class="max-w-[400px] bg-[1f2937] c-[ffffff] border-[none] rounded-[12px] shadow-[0_8px_24px_rgba(0_0_0_0.3)] p-[20px]">
<h4 class="m-[0_0_12px_0] c-[ffffff]">Popover personnalisé</h4>
<p class="m-[0] c-[d1.5db]">Contenu avec styles personnalisés</p>
</div>Positionnement automatique
Les popovers s'ajustent automatiquement pour rester visibles dans la fenêtre, même si la direction spécifiée les ferait sortir de l'écran.
Démo interactive
Testez les popovers en direct :
Cas d'usage
Créer un compte
<div class="popover-demo---[max-w-[800px]+mx-[auto]+p-[24px]+bg-[f8f9fa]+rounded-[8px]]">
<div class="mb-[24px]">
<h4 class="mb-[12px] font-weight-[600]">Cas d'usage</h4>
<div class="d-[flex] gap-[12px] flex-flow-[wrap] items-[center]">
<button data-popover-trigger="demo-form"
class="btn-demo-pop---[bg-[10b981]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer]] btn-demo-pop----[bg-[059669]]:hover">
<span class="icon-[user] icon-size-[small]"></span>
Inscription
</button>
<div id="demo-form" data-popover data-popover-direction="bottom">
<h5 class="m-[0_0_12px_0]">Créer un compte</h5>
<input type="email" placeholder="Email"
class="w-[100%] p-[8px] mb-[8px] border-[1px_solid_ddd] rounded-[4px]">
<button class="w-[100%] bg-[10b981] c-[fff] p-[8px] border-[none] rounded-[4px] cursor-[pointer]">
S'inscrire
</button>
</div>
</div>
</div>
</div>Fermeture automatique
Le popover se ferme automatiquement :
- Au clic en dehors du popover
- Au clic sur le déclencheur (toggle)
- Programmatiquement via l'API