2 Tailwind4 with JSPublished 2026-10-05Free · no sign-up
Six popovers styled with Tailwind: a share panel on the native popover attribute, a filter panel anchored under its button, a profile hover card, an inline delete confirmation, a three-dot actions menu and a click-to-show info bubble.
A share panel built on the HTML popover attribute: popovertarget on the button opens it with no script, clicking outside or pressing Escape closes it, and it sits in the top layer above everything. Tailwind styles it like any element.
A filter panel that opens directly under its button. The script handles aria-expanded, closes the panel on Escape or an outside click, and returns focus to the button, the details that make a popover feel right.
var b = document.getElementById('twpo2b'), p = document.getElementById('twpo2');
function set(open, refocus) { b.setAttribute('aria-expanded', open); p.hidden = !open; if (!open && refocus) b.focus(); }
b.onclick = function () { set(p.hidden); };
p.querySelector('[data-apply]').onclick = function () { set(false, true); };
document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !p.hidden) set(false, true); });
document.addEventListener('click', function (e) { if (!p.hidden && !p.contains(e.target) && e.target !== b && !b.contains(e.target)) set(false); });
03. Tailwind Profile Hover Card
TailwindPopoverHover
Hovering or focusing a name shows a small profile card above it after a short delay. The card holds information only, no buttons, and it is linked to the name with aria-describedby so screen reader users get the same details.
A small confirmation bubble that appears above a Delete button instead of a full modal. Focus moves to Cancel, Escape backs out, and the result is announced in a status message.
var b = document.getElementById('twpo4b'), p = document.getElementById('twpo4');
function close() { p.hidden = true; b.setAttribute('aria-expanded', 'false'); b.focus(); }
b.onclick = function () { p.hidden = false; b.setAttribute('aria-expanded', 'true'); p.querySelector('[data-no]').focus(); };
p.querySelector('[data-no]').onclick = close;
p.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
p.querySelector('[data-yes]').onclick = function () { p.hidden = true; document.getElementById('twpo4f').textContent = 'File deleted'; b.disabled = true; b.classList.add('opacity-50'); document.getElementById('twpo4s').textContent = 'invoice-0912.pdf deleted'; };
05. Tailwind Actions Menu Popover
TailwindPopoverMenu
A three-dot button that opens a list of actions in a native popover, positioned under the button by a few lines of script on the toggle event. Light dismiss and Escape come free with the popover attribute.
var b = document.getElementById('twpo5b'), p = document.getElementById('twpo5');
p.addEventListener('toggle', function (e) { if (e.newState !== 'open') return; var r = b.getBoundingClientRect(); p.style.inset = 'auto'; p.style.top = r.bottom + 6 + 'px'; p.style.left = Math.max(8, Math.min(r.right - p.offsetWidth, innerWidth - p.offsetWidth - 8)) + 'px'; p.querySelector('button').focus(); });
p.querySelectorAll('button').forEach(function (x) { x.onclick = function () { p.hidePopover(); b.focus(); }; });
06. Tailwind Info Toggletip
TailwindPopoverTooltip
An i button that shows a short explanation in a bubble when clicked, the toggletip pattern. The bubble's text is written into a status region on demand, so screen readers announce it at the moment it appears.
var b = document.getElementById('twpo6b'), s = document.getElementById('twpo6');
function close() { s.innerHTML = ''; }
b.onclick = function () { if (s.innerHTML) { close(); return; } s.innerHTML = '<span class="block rounded-lg bg-slate-900 px-3 py-2 text-xs font-normal text-white shadow-lg">Free on orders over $50. Otherwise a flat $4 anywhere in the country.</span>'; };
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
document.addEventListener('click', function (e) { if (e.target !== b) close(); });
About these Tailwind Popovers
Try the popover attribute first
popover plus popovertarget gives open, close, Escape and outside-click dismissal with no script, and puts the panel in the top layer.
Anchor with a little script
Native popovers open in the centre; to place one under its button, set top and left from the button's position on the toggle event.
Manage focus
When a popover holds actions, move focus into it on open and back to the trigger on close, as the confirmation and menu demos do.
Hover cards hold information only
Content that appears on hover should not contain buttons; connect it with aria-describedby so it is available without a mouse.
Frequently asked questions
Is the popover attribute supported?
Yes, in all current major browsers.
Tooltip or toggletip?
Tooltips label controls on hover; toggletips show extra information on click and announce it.