HTML Popover API: Simple Popup Solutions

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.

Buy Me A Coffee

Explore More Posts