Primary Theme
Use for important information or primary actions.
popover Component
Popover System
The popover system provides rich, interactive overlays with positioning. It requires three parts:
- Trigger Element - A button or element with
data-popover="popover-id"attribute - Popover HTML - The popover structure with matching
id="popover-id" - JavaScript - Automatically loaded via
hygge.core.js(no setup needed!)
Basic Popover
Popover Sizes
Tiny Popover
Small Popover
Large Popover
Positioning
Top Positions
Bottom Positions
Feature Variations
Popover with Icon
Popover with Footer Actions
Popover with Text Stepper
Color Themes
Themed Popovers
JavaScript API
Programmatic Control
// Open a popover
Popover.open('my-popover', triggerElement);
// Close a specific popover
Popover.close('my-popover');
// Close all open popovers
Popover.closeAll();
// Toggle a popover
Popover.toggle('my-popover', triggerElement);
// Check if popover is open
if (Popover.isOpen('my-popover')) {
console.log('Popover is open');
}
Popover Events
// Listen for open event
$('#my-popover').on('popover:open', function(e, popoverId) {
console.log('Popover opened:', popoverId);
});
// Listen for close event
$('#my-popover').on('popover:close', function(e, popoverId) {
console.log('Popover closed:', popoverId);
});
Custom Positioning
<!-- Use data-position attribute -->
<div id="custom-popover" class="popover-overlay hidden" data-position="top-start">
<!-- Popover content -->
</div>
<!-- Or add position class to .popover element -->
<div class="popover top-end">
<!-- Popover content -->
</div>