Patterns / popover & tooltip

popover & tooltip

Tier 1

popover attribute + popovertarget invokers. Toggle, light dismiss, Esc, top layer — the browser's. Zero JS.

Anchored panelLight dismiss, Esc, toggling: all the browser. Anchored to the invoker where anchor positioning exists.

<button popovertarget="menu">Menu</button>

<div id="menu" popover class="menu">
  <button popovertarget="menu" popovertargetaction="hide">Edit</button>
  <button popovertarget="menu" popovertargetaction="hide">Duplicate</button>
  <hr />
  <button class="danger" popovertarget="menu" popovertargetaction="hide">Delete</button>
</div>

<button data-tip="Saved" aria-label="Saved">Hover me</button>

Notes

Menu items close the menu declaratively (popovertargetaction="hide") — an item is a button doing its job plus one attribute. Tab/Esc/light-dismiss are native; arrow-key roving is a future Tier-2 module. Tooltips are CSS-only (data-tip) and visual — pair with aria-label or visible text. Where anchor positioning is missing, popovers fall back to the UA's centered position.