popover Component

Popover System

The popover system provides rich, interactive overlays with positioning. It requires three parts:

  1. Trigger Element - A button or element with data-popover="popover-id" attribute
  2. Popover HTML - The popover structure with matching id="popover-id"
  3. JavaScript - Automatically loaded via hygge.core.js (no setup needed!)

Basic Popover

Preview Code
Copy

Popover Sizes

Tiny Popover

Preview Code
Copy

Small Popover

Preview Code
Copy

Large Popover

Preview Code
Copy

Positioning

Top Positions

Preview Code
Copy

Bottom Positions

Preview Code
Copy

Feature Variations

Popover with Icon

Preview Code
Copy

Popover with Footer Actions

Preview Code
Copy

Popover with Text Stepper

Preview Code
Copy

Color Themes

Themed Popovers

Preview Code
Copy

JavaScript API

Programmatic Control

Preview Code
Copy
// 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

Preview Code
Copy
// 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

Preview Code
Copy
<!-- 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>