â ī¸ Warning â ī¸ Deprecated Code! This video tutorial contains outdated code.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
đĄ If you wish to update it, any AI assistant will update the code for you in seconds.
Mastering Popover Web API Programming JavaScript and HTML
Learn how to implement and master the Popover API with these examples and resources. The Popover API is a new, powerful web standard that provides built-in browser support for creating non-modal user interface elements that float above the rest of the page content. Essential for web developers and front-end engineers looking to modernize their UIs and replace complex custom solutions for elements like tooltips, menus, contextual windows, and dialogs that need light dismiss behavior.
Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API Controlling Popovers through scripting: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/togglePopover CSS Anchor Positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning ( not directly related but you might find it helpful with positioning your popovers )
<style>
#popover1 { padding: 50px; }
#popover1::backdrop {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
}
</style>
<button popovertarget="popover1">Toggle the popover</button>
<div id="popover1" popover="auto">Popover content</div>
<script>
// Toggle popover through scripting
// document.getElementById('popover1').togglePopover();
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover API Uses Demo</title>
<style>
body {
font-family: sans-serif;
padding: 30px;
background-color: #f4f4f9;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
/* General Popover Styling */
[popover] {
border: 1px solid #bdc3c7;
padding: 15px;
border-radius: 6px;
background-color: #ecf0f1;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
/* Prevent the popovers from taking up excessive screen space by default */
max-width: 250px;
}
/* Demo-Specific Styles */
.demo-section {
margin-bottom: 40px;
padding: 20px;
border: 1px dashed #95a5a6;
border-radius: 4px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #2980b9;
}
/* Popover 1: Menu */
#user-menu {
list-style: none;
padding: 0;
margin: 0;
}
#user-menu li {
padding: 8px 0;
border-bottom: 1px solid #ccc;
}
#user-menu li:last-child {
border-bottom: none;
}
#user-menu a {
text-decoration: none;
color: #2c3e50;
}
/* Popover 2: Hint/Tooltip-like Info Card */
.info-popover {
background-color: #f39c12;
color: white;
}
/* Popover 3: Notification Stack */
.notification-item {
padding: 10px 0;
border-bottom: 1px solid #ccc;
font-size: 0.9em;
}
.notification-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Popover API: Handy Use Cases</h1>
<p>Popovers are great for non-modal, contextual, transient UI elements that don't block the user's workflow.</p>
<div class="demo-section">
<h2>1. Dropdown Menu</h2>
<p>Use <code>popover="auto"</code> for light-dismissal and automatic closing of other popovers.</p>
<button popovertarget="menu-popover">User Actions</button>
<div id="menu-popover" popover="auto">
<ul id="user-menu">
<li><a href="#">Profile Settings</a></li>
<li><a href="#">View Cart (3 items)</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="demo-section">
<h2>2. Information Card/Hint</h2>
<p>Use <code>popover="manual"</code> when you need custom control over when the popover opens and closes.</p>
<span style="font-weight: bold;">Order #98765</span>
<button popovertarget="info-popover" popovertargetaction="show">i</button>
<button popovertarget="info-popover" popovertargetaction="hide">Close Info</button>
<div id="info-popover" popover="manual" class="info-popover">
<strong>Current Status: Shipping Soon</strong>
<p>Estimated delivery: October 25th. Tracking information will be available within 24 hours.</p>
</div>
</div>
<div class="demo-section">
<h2>3. Notifications (Multiple Popovers)</h2>
<p>Multiple *manual* popovers can be open simultaneously, useful for non-blocking toasts or notices. You'd typically use JavaScript to position and manage the stack.</p>
<button popovertarget="notif1">Show Notification 1</button>
<button popovertarget="notif2">Show Notification 2</button>
<div id="notif1" popover="manual" class="notification-item" style="background-color: #e74c3c; color: white;">
Critical Error: Database connection lost.
<button onclick="document.getElementById('notif1').hidePopover()">✕</button>
</div>
<div id="notif2" popover="manual" class="notification-item" style="background-color: #2ecc71; color: white;">
Success: File upload complete!
<button onclick="document.getElementById('notif2').hidePopover()">✕</button>
</div>
</div>
</div>
</body>
</html>