Documentation - Popover.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Popover
Marssel offers a popover system to display contextual content in a floating window when a trigger is clicked. Ideal for displaying detailed information, forms or additional actions.
Basic setup
The PopoverManager is automatically initialized:
const marssel = new Marssel();
// The PopoverManager is ready to useHTML structure
A popover consists of a trigger and content:
Popover title
Popover content with additional information.
<!-- Trigger -->
<button data-popover-trigger="popover-1">
Show popover
</button>
<!-- Popover -->
<div id="popover-1" data-popover>
<h4>Popover title</h4>
<p>Popover content with additional information.</p>
</div>Directions available
Position the popover with data-popover-direction:
<!-- Bottom (default) -->
<button data-popover-trigger="popover-bottom">Bottom</button>
<div id="popover-bottom" data-popover data-popover-direction="bottom">
Content at the bottom
</div>
<!-- Up -->
<button data-popover-trigger="popover-top">Top</button>
<div id="popover-top" data-popover data-popover-direction="top">
Content at top
</div>
<!-- Left -->
<button data-popover-trigger="popover-left">Left</button>
<div id="popover-left" data-popover data-popover-direction="left">
Content on the left
</div>
<!-- Right -->
<button data-popover-trigger="popover-right">Right</button>
<div id="popover-right" data-popover data-popover-direction="right">
Content on the right
</div>JavaScript API
Control popovers programmatically:
// Recover a popover
const trigger = document.querySelector('[data-popover-trigger="popover-1"]');
const popoverData = marssel.popoverManager.popovers.get(trigger);
// Open a popover
marssel.popoverManager.openPopover(popoverData);
// Close active popover
marssel.popoverManager.closeActivePopover();
// Toggle a popover
marssel.popoverManager.togglePopover(trigger);Customizing styles
Style your popovers with Marsel classes:
<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]">Custom popover</h4>
<p class="m-[0] c-[d1.5db]">Content with custom styles</p>
</div>Automatic positioning
Popovers automatically adjust to remain visible in the window, even if the specified direction would cause them to move off the screen.
Interactive demo
Test popovers live:
Use cases
Create an account
<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]">Use cases</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>
Registration
</button>
<div id="demo-form" data-popover data-popover-direction="bottom">
<h5 class="m-[0_0_12px_0]">Create an account</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>Automatic closing
The popover closes automatically:
- On click outside the popover
- When clicking on the trigger (toggle)
- Programmatically via API