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.

<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>

<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>

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`

<button popovertarget="demo">Toggle</button>  <button popovertarget="demo" popovertargetaction="show">Show</button>  <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.

<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 <tooltip-wc> web component.

Menu Pattern

A navigation menu built entirely with native HTML:

<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.

<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