--- title: "Popover" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "CSS-only Tailwind CSS popover and dropdown menu. Native HTML Popover API, navbar dropdowns, profile menus — no JavaScript. WCAG accessible, Django, HTMX, Larave" url: https://frutjam.com/fr/components/popover --- # Popover Component Les composants popover affichent le contenu contextuel à côté des éléments déclencheurs sans occuper d'espace d'écran permanent. Construit sur l'API HTML Popover native, le système de popover Frutjam prend en charge les déclencheurs de clic et de survol, un positionnement personnalisable et des animations fluides. Parfait pour les menus déroulants, les menus contextuels, les menus de profil utilisateur et les options supplémentaires sans navigation dans les pages. CSS uniquement, aucun JavaScript requis : créez des menus déroulants accessibles et des superpositions contextuelles avec du HTMX pur et du CSS Tailwind. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile. | Classe | Taper | Description | | --------------------- | ------------ | ------------------------------------------------------- | | popover | Base | Wrapper qui ancre le déclencheur et le contenu ensemble | | popover-content | Modificateur | Panneau flottant affiché lorsque le popover est ouvert | | popover-toggle | Modificateur | Élément déclencheur qui ouvre/ferme le popover | | popover-hover | Modificateur | S'ouvre en survolant au lieu de cliquer | | popover-top-start | Modificateur | Positionné au dessus, aligné au départ | | popover-top-center | Modificateur | Positionné au dessus, centré | | popover-top-end | Modificateur | Positionné au-dessus, aligné à la fin | | popover-bottom-start | Modificateur | Positionné en dessous, aligné au début | | popover-bottom-center | Modificateur | Positionné en dessous, centré | | popover-bottom-end | Modificateur | Positionné en dessous, aligné à la fin | | popover-start-top | Modificateur | Positionné à gauche, aligné en haut | | popover-start-center | Modificateur | Positionné à gauche, centré verticalement | | popover-start-bottom | Modificateur | Positionné à gauche, aligné en bas | | popover-end-top | Modificateur | Positionné à droite, aligné en haut | | popover-end-center | Modificateur | Positionné à droite, centré verticalement | | popover-end-bottom | Modificateur | Positionné à droite, aligné en bas | ## Utilisation de base ## Menu déroulant Utilisez le composant Popover pour créer des menus déroulants (menus déroulants de navigation, menus de profil utilisateur et menus d'action), le tout uniquement en CSS sans JavaScript requis. ### Liste déroulante de la barre de navigation ### Liste déroulante des profils utilisateur ### Liste déroulante avec icônes ## Comportement d'interaction popover Par défaut, les interactions de clic sont utilisées pour ouvrir et fermer le composant popover. Pour les mégamenus, par exemple, vous pouvez activer l'interaction basée sur le survol en ajoutant la classe `popover-hover` et en supprimant les attributs `popovertarget` et `popover`. Cela permet au popover d'être entièrement contrôlé via la logique de survol plutôt que le comportement de clic natif. ### Déclencheur de clic natif ```html
``` ### Logique d'interaction de survol ```html
``` ## Options de positionnement du popover (haut, bas, début, fin) Positionnez vos popovers par rapport à leurs éléments déclencheurs en utilisant notre logique de placement flexible. Le placement du popover est créé en combinant les options d'alignement vertical (haut, centre, bas) et horizontal (début, centre, fin). ### Position popover de départ supérieur ```html
``` ### Position popover en haut au centre ```html
``` ### Position popover haut de gamme ```html
``` ### Position du popover de fin en haut ```html
``` ### Position du popover au centre de l'extrémité ```html
``` ### Position du popover fin-bas ```html
``` ### Position popover de début inférieur ```html
``` ### Position popover en bas au centre ```html
``` ### Position popover inférieure ```html
``` ### Position du popover Start-Top ```html
``` ### Position popover du centre de démarrage ```html
``` ### Position du popover début-bas ```html
``` ## Utilisation de popovers dans les tableaux de données (menus d'action et confirmations) ```html
Project Category Primary Tech
E-commerce Dashboard
Internal Tool
 Full Stack Admin Panel Next.js
  • Are you sure? delete this record!
CI Pipeline
Infrastructure
 DevOps Automation GitHub Actions
Project Category Primary Tech
```