Popover

A rich floating element utilizing the HTML Popover API and @utility popover-* classes.

Popover Content

This popup uses zero JavaScript for its toggle state. The browser handles click-outside automatically!

Usage

popover.html
<button popovertarget="my-popover" class="btn btn-primary color-group-primary">Toggle Popover</button>

<div id="my-popover" popover="auto" class="popover">
  <h3 class="popover-title">Popover Content</h3>
  <p class="popover-description">This popup uses zero JavaScript for its toggle state. The browser handles click-outside automatically!</p>
</div>