popovertarget
A popover with no JavaScript at all
Top layer, light dismiss, Escape to close. Two attributes, zero lines of script.
CaveatIt lives in the top layer, so z-index on it or on anything around it is meaningless. Stacking is decided by the order things were promoted, and that trips up anyone debugging it the usual way.
FallbackLight dismiss, Escape and the trigger wiring all come from the two attributes. Where the API is missing the panel renders inline as ordinary content rather than disappearing.
<button popovertarget="tips">Show tips</button>
<!-- no script, no listener, no library -->
<div id="tips" popover>…</div>
Published