3 Pure CSS4 with JSPublished 2026-10-05Free · no sign-up
Seven popovers built on the HTML popover attribute: a basic popover opened by popovertarget, one anchored to its button with CSS anchor positioning, a help popover beside a form label, a list of actions, a delete confirmation, a small rename form and a profile hover card.
The popover attribute and a button with popovertarget give a popover with light dismiss (click outside), Escape to close and correct focus handling, with no JavaScript. It renders in the top layer, so it is never clipped by overflow: hidden ancestors.
View code
<div class="pop1"><button popovertarget="pop1p">What is a SKU?</button><div id="pop1p" popover><b>SKU</b><p>A stock-keeping unit: your own code for one specific product variant, such as a size and colour.</p></div></div>
CSS anchor positioning ties the popover to the button that opens it: position-anchor names the anchor and position-area: bottom places it below, flipping above if there is no room. Browsers without anchor positioning centre the popover instead.
View code
<div class="pop2"><button popovertarget="pop2p" class="trig">Shipping info</button><div id="pop2p" popover><p>Free over $50. Ships in 2 working days from Porto.</p></div></div>
A small question-mark button beside a form label opens a help popover. Unlike a hover tooltip it works on touch screens and stays open while the help is read, and the button is named after what it explains: Help with VAT number.
View code
<div class="pop3"><label for="pop3v">VAT number</label><button popovertarget="pop3p" aria-label="Help with VAT number">?</button><input id="pop3v" placeholder="GB123456789"><div id="pop3p" popover><p>Only needed for business orders. You will find it on your VAT registration certificate.</p></div></div>
A More button opens a small list of actions for an item. It is a popover containing ordinary buttons, which keeps keyboard use simple (Tab moves through them), and choosing an action closes the popover with hidePopover().
var p = document.getElementById('pop4p'), st = document.querySelector('.pop4 p');
p.querySelectorAll('button').forEach(function (b) { b.onclick = function () { p.hidePopover(); st.textContent = b.textContent + ' chosen (demo)'; }; });
05. Confirm Before Deleting
PopoverConfirm
A small confirmation popover right next to the Delete button, lighter than a full dialog for a low-stakes delete. It holds a question and two buttons, the Cancel button closes it with popovertargetaction="hide", and nothing is deleted until Delete is pressed.
var p = document.getElementById('pop5p'), st = document.querySelector('.pop5 .st');
p.querySelector('.yes').onclick = function () { p.hidePopover(); st.textContent = 'Comment deleted.'; document.querySelector('.pop5 .del').disabled = true; };
06. Popover with a Small Form
PopoverForm
Rename an item in place with a popover holding a labelled input and Save button. Focus moves into the input when the popover opens, Enter saves and Escape cancels, and the new name updates the item and is announced.
var f = document.getElementById('pop6p'), i = document.getElementById('pop6i'), nm = document.querySelector('.pop6 .nm'), st = document.querySelector('.pop6 .st');
f.addEventListener('toggle', function (e) { if (e.newState === 'open') { i.value = nm.textContent; i.select(); } });
f.onsubmit = function (e) { e.preventDefault(); var v = i.value.trim(); if (v) { nm.textContent = v; st.textContent = 'Renamed to ' + v; } f.hidePopover(); };
07. Profile Hover Card
PopoverHover card
Hovering or focusing a username shows a profile card after a short delay, using a manual popover opened with showPopover(). It also opens on keyboard focus, closes on Escape, and the link still goes to the full profile, so the card is a shortcut, never the only way.
View code
<div class="pop7"><p>Commented by <a href="#ana" class="u">@ana</a> 2 hours ago</p><div id="pop7p" popover="manual" role="tooltip"><span class="av" aria-hidden="true">AR</span><b>Ana Ribeiro</b><span>Design lead · 214 posts</span></div></div>
var u = document.querySelector('.pop7 .u'), p = document.getElementById('pop7p'), t;
u.setAttribute('aria-describedby', 'pop7p');
function open() { clearTimeout(t); t = setTimeout(function () { if (!p.matches(':popover-open')) p.showPopover(); }, 300); }
function close() { clearTimeout(t); t = setTimeout(function () { if (p.matches(':popover-open')) p.hidePopover(); }, 200); }
u.addEventListener('mouseenter', open); u.addEventListener('focus', open); u.addEventListener('mouseleave', close); u.addEventListener('blur', close);
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && p.matches(':popover-open')) p.hidePopover(); });
About these CSS Popovers
The popover attribute does the work
Add popover to an element and popovertarget to a button, and the browser handles opening, closing on Escape, closing when clicking outside and showing it in the top layer above everything else.
Anchor it to the trigger
CSS anchor positioning places the popover next to its button: name the button with anchor-name and use position-anchor and position-area on the popover. Add a fallback for browsers without it.
Popover is not a dialog
Popovers are for light, non-blocking content. For something that must be answered before continuing, use a modal <dialog> instead.
Manual popovers for hover cards
popover="manual" turns off light dismiss so script can open and close it on hover and focus with delays. Always open on focus too, and close on Escape.
Frequently asked questions
Which browsers support the popover attribute?
All current major browsers.
Are popovers accessible?
The browser manages focus and dismissal; give the trigger a clear name and keep the content short.
Is a popover the same as a tooltip?
No. Tooltips are short hover hints; popovers can hold content and controls and stay open until dismissed.