The HTML Popover API makes it easy to add popups without JavaScript. However, JavaScript events like beforetoggle
and toggle
can still be used to manage popover behavior, such as controlling when they open or close and adding interactivity. This allows for a clean HTML structure with optional JavaScript enhancements.
Popover API details: https://developer.chrome.com/blog/introducing-popover-api
Basic example
<button popovertarget="popoverItem">Open Popover</button>
<div popover id="popoverItem">
Hello world!
</div>
See the Pen HTML Popover Example by UI Duck (@uiduck) on CodePen.