A popover with no JavaScript at all
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
Questions
Why does z-index have no effect on my popover?
An open popover is in the top layer, which sits above every stacking context on the page — z-index on it, or on anything around it, means nothing. Order in the top layer is decided by what was promoted last.
How do I close a popover?
You do not have to. Clicking outside, pressing Escape and the trigger toggling itself all come free with popovertarget and popover — that is the whole reason to use the attributes rather than wiring a panel by hand.
What happens where the Popover API is missing?
The panel renders inline, as ordinary content in the flow. Visible in the wrong place is a far better failure than a panel that vanishes, and it is why this is safe to ship without a feature check.