No Login Data Private Local Save

Popover API Demo - Online No‑JS Tooltips & Menus

16
0
0
0

🎯 Popover API Demo

Explore the native Popover API — create tooltips, menus, modals & more using pure HTML attributes. No JavaScript required.

Checking browser support…
🔰 Basics

Auto Popover (Light Dismiss)

Click the button to toggle. Click outside or press Esc to close — all built into the browser.

👋 Hello!
I'm a native popover. Click outside to dismiss me. 
<button popovertarget="my-popover">Toggle</button>

<div id="my-popover" popover="auto">
  Hello! I'm a native popover.
</div>
🎨 Styled

Dark Tooltip Popover

A tooltip-style popover with custom CSS — dark background, rounded, with smooth animation.

This is a styled tooltip using the Popover API!
Press Esc or click outside to close.
⚡ Zero JavaScript. 
<!-- HTML -->
<button popovertarget="tip">Hint</button>
<div id="tip" class="pop-tooltip" popover="auto">
  Styled tooltip!
</div>

<!-- CSS -->
.pop-tooltip {
  background: #2d3436; color: #fff;
  border-radius: 8px; padding: 0.6rem 1rem;
}
[popover]:popover-open {
  opacity: 1; transform: scale(1);
}
[popover]::backdrop {
  background: rgba(0,0,0,0.25);
}
📋 Menu

Dropdown Menu

A clean dropdown menu built with Popover API — perfect for navigation or action menus.

<button popovertarget="menu">Menu</button>
<div id="menu" class="pop-menu" popover="auto">
  <a href="#">Profile</a>
  <a href="#">Settings</a>
  <a href="#">Help</a>
  <hr>
  <a href="#">Logout</a>
</div>

<!-- CSS -->
.pop-menu { padding: 0.4rem 0; min-width: 180px; }
.pop-menu a { display: block; padding: 0.55rem 1.2rem; }
⚠️ Dialog

Confirm Popover

A confirmation dialog using Popover API. Includes action buttons — all declarative.

🗑️ Confirm Delete

Are you sure? This action cannot be undone.

<button popovertarget="confirm">Delete</button>
<div id="confirm" class="pop-confirm" popover="auto">
  <strong>Confirm Delete</strong>
  <p>Are you sure?</p>
  <button popovertarget="confirm"
          popovertargetaction="hide">
    Delete
  </button>
  <button popovertarget="confirm"
          popovertargetaction="hide">
    Cancel
  </button>
</div>
🔔 Notification

Notification Toast

A notification-style popover with a colored accent border. Great for alerts and toasts.

✅ Success!
Your changes have been saved successfully. 
<button popovertarget="notify">Show Alert</button>
<div id="notify" class="pop-notify" popover="auto">
  <strong>✅ Success!</strong>
  <small>Your changes have been saved.</small>
</div>

<!-- CSS -->
.pop-notify {
  border-left: 4px solid #10b981;
  max-width: 300px;
}
🖱️ CSS Hover

Pure CSS Hover Tooltip

A classic hover tooltip using zero JavaScript — no Popover API needed. Works in all browsers.

Hover me ✨ Pure CSS tooltip! Helpful info here 📝 
<!-- HTML -->
<span class="tooltip-wrap">
  Hover me
  <span class="tooltip">Pure CSS tooltip!</span>
</span>

<!-- CSS -->
.tooltip-wrap { position: relative; cursor: pointer; }
.tooltip {
  position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: #2d3436; color: #fff; padding: 0.5rem;
  border-radius: 6px; opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.tooltip-wrap:hover .tooltip { opacity: 1; }
🔀 Advanced

Multiple Triggers

Multiple buttons targeting the same popover. Any trigger toggles it.

🔁 Shared Popover
All three buttons control me! 
<button popovertarget="shared">Open</button>
<button popovertarget="shared">Also Opens</button>
<button popovertarget="shared"
        popovertargetaction="hide">Close</button>

<div id="shared" popover="auto">
  Shared popover content!
</div>
✨ Animation

Animated Entrance

Smooth scale+fade animation using :popover-open and @starting-style.

✨
Smooth animation!
Pure CSS — no JS animation libraries. 
[popover] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.18s, transform 0.18s,
              overlay 0.18s allow-discrete,
              display 0.18s allow-discrete;
}
[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

📚 Frequently Asked Questions

The Popover API is a native browser feature that allows developers to create pop-up elements (tooltips, menus, dialogs, etc.) using pure HTML attributes — no JavaScript required. It introduces the popover attribute and popovertarget attribute for declarative show/hide behavior, with built-in light dismiss (click outside to close), Esc key support, and top-layer rendering above all other content.

As of 2024, Popover API is supported in Chrome 114+, Edge 114+, Safari 17+, Firefox 125+, and Opera 100+. This covers approximately 92%+ of global web traffic. For unsupported browsers, consider using a polyfill or fallback to traditional CSS/JS tooltips.

popover="auto": The browser manages the popover — it closes automatically when you click outside (light dismiss) or press Esc. Only one auto popover can be open at a time. Best for most use cases.

popover="manual": You control show/hide via JavaScript. Multiple manual popovers can be open simultaneously. Useful for persistent tooltips, multi-step workflows, or programmatic control.

Light dismiss is the browser's built-in behavior for popover="auto": when a user clicks anywhere outside the popover (or presses Esc), the popover closes automatically. This is powered by an invisible ::backdrop layer that captures clicks. You can style this backdrop with CSS — for example, adding a semi-transparent overlay: [popover]::backdrop { background: rgba(0,0,0,0.3); }

Yes! There are two No-JS approaches:

1. Popover API (click-triggered): Use popover="auto" + popovertarget for click-to-show tooltips with full accessibility.
2. CSS-only hover tooltips: Use :hover pseudo-class with absolutely positioned elements for hover-triggered tooltips, which work in all browsers including older ones.

For the best experience, combine both: CSS hover tooltips for quick hints, Popover API for richer interactive content.

Yes! The Popover API has built-in accessibility: popovers are rendered in the top layer (above all content), receive automatic focus management, support Esc dismissal, and work with screen readers. For enhanced accessibility, always use semantic HTML inside popovers, add aria-label or aria-labelledby where appropriate, and ensure sufficient color contrast.

Animate popovers using the :popover-open pseudo-class combined with CSS transitions. Set initial styles (e.g., opacity: 0; transform: scale(0.95);) on the [popover] selector, then override them in [popover]:popover-open. For enter animations, use @starting-style (Chrome 117+) to define the pre-open state. Include allow-discrete in transitions for smooth overlay behavior.

Bootstrap popovers require JavaScript (Popper.js + Bootstrap JS) for positioning and interaction. Native Popover API is built into the browser — zero dependencies, faster load times, and automatically handles z-index (top layer), focus, and dismissal. However, Bootstrap offers more advanced positioning via Popper.js. For simple tooltips and menus, the native Popover API is often the better choice in supported browsers.

Yes! CSS Anchor Positioning (Chrome 125+) pairs perfectly with the Popover API. It allows you to tether a popover to its trigger element with precise control:
#my-popover { position-anchor: --trigger; top: anchor(bottom); }
This enables dropdown menus and tooltips that are positioned relative to their trigger without any JavaScript. For now, use it as a progressive enhancement with fallback centering.

Current limitations include: no built-in positioning relative to trigger elements (use CSS Anchor Positioning or manual CSS), limited styling of the default popover (override with CSS), browser support still requires polyfills for older browsers, and no hover trigger natively (popovers are click-driven; use CSS tooltips for hover). The API is actively evolving — expect improvements in future browser versions.
🔧 Related Tools