Popover
Popover component for displaying contextual information or actions in an overlay
Basic Usage
The most basic popover with a trigger and overlay:
<neura::popover>
<neura::popover.trigger>
<neura::button>Click me</neura::button>
</neura::popover.trigger>
<neura::popover.overlay>
<div class="p-4">
<h4>Popover Title</h4>
<p>Popover content</p>
</div>
</neura::popover.overlay>
</neura::popover>On Hover
Activez le popover au survol avec onHover="true":
Hover me
<neura::popover :onHover="true">
<neura::popover.trigger>
<span>Hover me</span>
</neura::popover.trigger>
<neura::popover.overlay>
<div class="p-4">
<p>Popover content</p>
</div>
</neura::popover.overlay>
</neura::popover>Positions
Contrôlez la position du popover avec l'attribut position:
<neura::popover.overlay position="top">...</neura::popover.overlay>
<neura::popover.overlay position="right">...</neura::popover.overlay>
<neura::popover.overlay position="bottom">...</neura::popover.overlay>
<neura::popover.overlay position="left">...</neura::popover.overlay>Overlay Size
Ajustez la taille de l'overlay avec les classes Tailwind. Par défaut, l'overlay utilise w-fit (largeur adaptée au contenu):
Match Button Width
Use la classe w-full pour que l'overlay prenne exactement la même largeur que le bouton trigger:
<neura::popover.overlay class="w-full">
<div class="p-4">
Content that matches button width
</div>
</neura::popover.overlay>Fixed Width
Maximum Width
Full Width with Container
<!-- Largeur fixe -->
<neura::popover.overlay class="w-64">
<div class="p-4">Content</div>
</neura::popover.overlay>
<!-- Largeur maximale -->
<neura::popover.overlay class="max-w-md">
<div class="p-4">Content</div>
</neura::popover.overlay>
<!-- Largeur plus grande -->
<neura::popover.overlay class="w-96">
<div class="p-4">Content</div>
</neura::popover.overlay>Rich Content
The popover can contain any HTML content:
<neura::popover.overlay>
<div class="p-4 max-w-xs">
<h4>Title</h4>
<p>Content</p>
<div class="flex gap-2">
<neura::button>Action</neura::button>
</div>
</div>
</neura::popover.overlay>Use Cases
Information Tooltip
API Key
Action Menu
Best Practices
✓ Do
- Use les popovers pour des informations contextuelles courtes
- Use onHover pour des tooltips informatifs
- Keep content concise and actionable
- Choisissez la position appropriée selon l'espace disponible
✗ Don't
- Ne pas utiliser des popovers pour du contenu très long - utilisez plutôt un modal
- Ne pas créer des popovers qui se déclenchent au survol sans raison valable
- Ne pas surcharger l'interface avec trop de popovers
- Ne pas utiliser des popovers pour des informations critiques
Properties
Popover Properties
| Property | Type | Default | Description |
|---|---|---|---|
| onHover | bool | false | Ouvrir le popover au survol au lieu du clic |
Popover Overlay Properties
| Property | Type | Default | Description |
|---|---|---|---|
| position | string | 'bottom' | Position du popover. Valeurs: 'top', 'right', 'bottom', 'left' |
| offset | int | 3 | Espacement entre le trigger et le popover (en unités Tailwind) |
| class | string | '' | Classes CSS personnalisées. Par défaut, l'overlay utilise w-fit. Use w-full pour correspondre à la largeur du bouton trigger, ou w-64, w-96, max-w-md, etc. pour d'autres tailles |