Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
popover
Zero-JavaScript popovers, menus, and tooltips via the native Popover API. VB provides styling for popovers and tooltip variants.
Overview
The Popover API lets you create overlay content with zero JavaScript. Elements with the popover attribute are hidden by default, appear in the browser's top layer when shown, and get light-dismiss behavior (click outside or press Escape to close).
VB provides styling for popovers and a tooltip variant. The Popover API replaces many cases that previously required JavaScript modal/dropdown libraries.
The popover Attribute
Add popover to any element to make it a popover. The element is hidden by default and shown when triggered.
| Value | Behavior |
|---|---|
popover (or popover="auto") | Light-dismiss: closes when clicking outside or pressing Escape. Only one auto popover is visible at a time. |
popover="manual" | No light-dismiss. Must be closed explicitly via button or JavaScript. Multiple manual popovers can be open simultaneously. |
Auto popover
<!-- Auto popover: light-dismiss (click outside or press Escape) --><button popovertarget="my-popover">Open Popover</button><div id="my-popover" popover> <p>This pops over everything.</p> <p>Click outside or press <kbd>Escape</kbd> to close.</p></div>Manual popover
<!-- Manual popover: stays open until explicitly closed --><button popovertarget="info-panel">Show Info</button><div id="info-panel" popover="manual"> <p>This stays open until you close it.</p> <button popovertarget="info-panel" popovertargetaction="hide">Close</button></div>Live demo
Click outside or press Escape to close.
Trigger Attributes
Any button can control a popover using these attributes.
| Attribute | Purpose |
|---|---|
popovertarget="id" | References the popover element's id |
popovertargetaction | Controls what happens: toggle (default), show, or hide |
Trigger actions
<!-- Toggle (default) --><button popovertarget="demo">Toggle</button> <!-- Show only --><button popovertarget="demo" popovertargetaction="show">Show</button> <!-- Hide only --><button popovertarget="demo" popovertargetaction="hide">Hide</button> <div id="demo" popover>Popover content</div>Tooltip Variant
VB styles [role="tooltip"][popover] as a compact tooltip. This combines the Popover API's positioning and dismiss behavior with ARIA's tooltip semantics.
Tooltip popover
<!-- VB styles [role="tooltip"][popover] as a tooltip --><button popovertarget="tip" popovertargetaction="toggle"> What's this?</button><div id="tip" role="tooltip" popover> A brief explanation of the feature.</div>For more advanced tooltip behavior (hover triggers, arrow positioning), see the <tool-tip> web component.
Menu Pattern
A navigation menu built entirely with native HTML:
Popover menu
<nav> <button popovertarget="menu"> <icon-wc name="menu"></icon-wc> Menu </button> <ul id="menu" popover> <li><a href="/dashboard">Dashboard</a></li> <li><a href="/settings">Settings</a></li> <li><a href="/logout">Sign out</a></li> </ul></nav>Nested Popovers
Auto popovers can nest. When a child popover opens, its parent stays open. Clicking outside closes all of them.
Nested popovers
<!-- Nested popovers: opening a child doesn't close the parent --><button popovertarget="parent-pop">Open menu</button><div id="parent-pop" popover> <p>Main menu</p> <button popovertarget="child-pop">More options</button> <div id="child-pop" popover> <p>Submenu content</p> </div></div>Styling
VB provides base styles for [popover] elements including padding, border, border-radius, and box-shadow. The ::backdrop pseudo-element is available for manual popovers.
Popovers render in the browser's top layer, which means they appear above all other content regardless of z-index. No z-index wars.
Comparison
| Feature | Popover API | <dialog> |
|---|---|---|
| Light dismiss | Auto popovers only | No |
| Top layer | Yes | Only with showModal() |
| Backdrop | Yes | Yes (modal only) |
| Focus trapping | No | Yes (modal only) |
| JavaScript required | No | Yes (showModal()) |
| Best for | Menus, tooltips, dropdowns | Modal dialogs, confirmations |
See Also
<dialog>for modal dialogs<tool-tip>for hover-triggered tooltips<drop-down>for rich dropdown menus