Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Popover API provides a standardized way to create popover content that appears on top of other content. No JavaScript required! Perfect for tooltips, menus, teaching UI, and more.
HTML attributes only
Automatic z-index handling
Keyboard & ARIA support
<!-- Button to trigger popover -->
<button popovertarget="my-popover">Show Popover</button>
<!-- Popover content -->
<div id="my-popover" popover>
<p>This is popover content!</p>
</div><div popover="auto"><div popover="manual">Marks element as popover content
<div popover> or <div popover="auto">Links button to popover by ID
<button popovertarget="my-popover">What button does: toggle, show, hide
popovertargetaction="toggle"toggle - Show/hide (default)show - Only showhide - Only hideShow the popover
element.showPopover();Hide the popover
element.hidePopover();Toggle visibility
element.togglePopover();beforetoggle
element.addEventListener('beforetoggle', ...)toggle
element.addEventListener('toggle', ...)[popover] {
padding: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}[popover]:popover-open {
/* Styles when open */
animation: fadeIn 0.2s;
}[popover]::backdrop {
background: rgba(0,0,0,0.5);
backdrop-filter: blur(2px);
}@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Show additional information on hover/click
Help icons, field descriptionsNavigation or action menus
User menu, settings, actionsOnboarding and feature highlights
Product tours, feature announcementsQuick confirmations without full modal
Delete confirm, Quick actionsRight-click style menus
Quick options, shortcutsInput hints and validation messages
Password strength, format hintsSee different popover types with various styles and behaviors
Click outside or press ESC to close - default behavior
<button popovertarget="auto-popover" class="btn blue">Show Auto Popover</button>
<div id="auto-popover" popover class="popover-content">
<h3>ℹ️ Auto Popover</h3>
<p>This is an auto popover. Try these:</p>
<ul>
<li>Click outside to close</li>
<li>Press ESC to close</li>
<li>Opening another auto popover closes this one</li>
</ul>
</div>
<p class="info">🖱️ Light dismiss enabled - click outside or press ESC</p>Loading preview...
Must be closed explicitly with hide button - no light dismiss
<button popovertarget="manual-popover" popovertargetaction="show" class="btn green">
Show Manual Popover
</button>
<button popovertarget="manual-popover" popovertargetaction="hide" class="btn red">
Hide Manual Popover
</button>
<div id="manual-popover" popover="manual" class="popover-content">
<h3>🔒 Manual Popover</h3>
<p>This is a manual popover. Characteristics:</p>
<ul>
<li>Clicking outside doesn't close it</li>
<li>ESC doesn't close it</li>
<li>Multiple can be open at once</li>
<li>Must use hide button</li>
</ul>
</div>
<p class="info accent">⚙️ Manual control only - requires explicit close</p>Loading preview...
Custom styled actions menu with hover effects
<button popovertarget="menu-popover" class="btn purple">Open Menu</button>
<div id="menu-popover" popover class="menu-popover">
<div class="menu-header">
<h3>⚙️ Actions Menu</h3>
</div>
<div class="menu-items">
<button class="menu-item">
<span class="menu-icon">✏️</span>
Edit
</button>
<button class="menu-item">
<span class="menu-icon">📋</span>
Copy
</button>
<button class="menu-item">
<span class="menu-icon">📤</span>
Share
</button>
<hr class="menu-divider">
<button class="menu-item danger">
<span class="menu-icon">🗑️</span>
Delete
</button>
</div>
</div>
<p class="info">🎨 Custom styled with hover effects and divider</p>Loading preview...
Small info tooltips inline with text
<p>
Hover or click the
<button popovertarget="tooltip1" class="tooltip-trigger">ℹ️</button>
icon to see more info.
</p>
<div id="tooltip1" popover class="tooltip-popover">
<strong>💡 Did you know?</strong><br>
Popovers automatically position themselves in the viewport and handle z-index!
</div>
<p style="margin-top: 1rem;">
Here's another
<button popovertarget="tooltip2" class="tooltip-trigger">❓</button>
tooltip example.
</p>
<div id="tooltip2" popover class="tooltip-popover">
<strong>🎯 Top Layer</strong><br>
Popovers render in the top layer, so they're always visible above other content.
</div>
<p class="info">💬 Tooltip pattern for inline help</p>Loading preview...
Different actions (show, hide, toggle) for same popover
<div class="button-group">
<button popovertarget="multi-popover" popovertargetaction="show" class="btn blue">
Show
</button>
<button popovertarget="multi-popover" popovertargetaction="hide" class="btn red">
Hide
</button>
<button popovertarget="multi-popover" popovertargetaction="toggle" class="btn purple">
Toggle
</button>
</div>
<div id="multi-popover" popover class="popover-content">
<h3>🎮 Control Demo</h3>
<p>This popover can be controlled by three different buttons:</p>
<ul>
<li><strong>Show</strong> - Only opens</li>
<li><strong>Hide</strong> - Only closes</li>
<li><strong>Toggle</strong> - Opens or closes</li>
</ul>
</div>
<p class="info">🔘 Multiple trigger buttons with different actions</p>Loading preview...
auto for tooltips and menusPlay around with auto and manual popover examples