Drop-in semantic component. See examples, sizes, variants, and source.
Rich, interactive overlay anchored to a trigger element. Wrap content in a
popover inside a popover-overlay,
give it an id, then point any trigger at it with
data-popover="popover-id". Position with
data-position (top, bottom, left, right, plus
-start / -end alignment).
Open/close, focus trapping, and animations are handled by
popover.js.
Popover System
Basic Popover
Welcome to Popovers
This is a basic popover with a title and description.
Popovers are perfect for rich content that requires user interaction. They stay open until dismissed.
<!-- Trigger Button -->
<button class="button" data-popover="basic-popover">Open Popover</button>
<!-- Popover HTML -->
<div id="basic-popover" class="popover-overlay hidden" data-position="bottom">
<div class="popover">
<div class="popover-tail"></div>
<div class="header">
<div class="content">
<h3 class="title">Welcome to Popovers</h3>
<p class="description">This is a basic popover with a title and description.</p>
</div>
<button class="button close" type="button" aria-label="Close">
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
>
<path
d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"
></path>
</svg>
</button>
</div>
<div class="content">
<p>
Popovers are perfect for rich content that requires user interaction. They stay open until
dismissed.
</p>
</div>
</div>
</div>
// 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');
}
// 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);
});
// 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); });
Class API Reference
Type
Class / Attribute
Usage
Notes
Base
popover-overlay
Outer fixed-position layer; carries the data-position
Start with hidden class
popover
The card itself — header, body, footer, tail
372px wide by default
popover-tail
Arrow that points back at the trigger
Hide with .no-tail on .popover
data-popover="id"
Trigger attribute that wires to a popover by id
Place on any focusable element
Sizes
xs
280px wide — tiny
Modifier on popover
sm
320px wide — small
Modifier on popover
(default)
372px wide — medium
No size class needed
xl
480px wide — large
Modifier on popover
lg
600px wide — big
Modifier on popover
Position
data-position="top|bottom|left|right"
Side relative to trigger
Goes on the popover-overlay
-start / -end suffix
Edge alignment (e.g. top-start, bottom-end)
Combine with the side
top|bottom|left|right
Class form on .popover — same options
Use either attribute or class
visible
Activates pointer events + opacity transition
Toggled by JS
Sections
header
Top row — icon, title, description, close
Add .no-border to drop divider
title / description
Header text rows
Inside header > .content
icon-container
Leading icon slot in header
20×20
content / body
Main popover content area
Padding scales with size
footer
Bottom row — stepper text + actions
Hosts .step and .actions
button close
Close button in the header
Auto-wired by JS
Themes
primary
Blue tinted background
Modifier on popover
positive
Green tinted background
Modifier on popover
negative
Red tinted background
Modifier on popover
warning
Yellow tinted background
Modifier on popover
info
Light-blue tinted background
Modifier on popover
Welcome to Popovers
This is a basic popover with a title and description.
Popovers are perfect for rich content that requires user interaction. They stay open until dismissed.
Tiny Popover
Compact popover for minimal content.
Small Popover
Perfect for quick interactions.
Large Popover
More space for detailed content and interactions.
Large popovers provide ample space for rich content, forms, or complex interactions.
Feature 1
Description here
Feature 2
Description here
Top Position
Popover appears above the trigger element.
Top Start
Aligned to the left edge.
Top End
Aligned to the right edge.
Bottom Position
Popover appears below the trigger element.
Bottom Start
Aligned to the left edge.
Bottom End
Aligned to the right edge.
Success!
Your changes have been saved successfully.
Getting Started
Follow these steps to complete your setup.
This is the second step of the setup process. Click Next to continue or Back to return.