Popover

The popover (.popover) is a floating card anchored to a trigger, used for richer content than a menu or tooltip can hold — a title, a body, and an optional footer with action buttons — plus a small arrow pointing back at the trigger. Structurally it is the most nested of the anchored overlays: a .popover-anchor wrapper owns the positioning, wrapping the .popover element that flickui.js shows/hides, which in turn wraps a .popover-panel surface.

<div class="popover-anchor" id="popover-demo">
  <button type="button" class="btn btn-outline toggle-target" aria-controls="popover-demo">
    <span class="btn-label">Info</span>
  </button>
  <div class="popover popover-primary">
    <div class="popover-panel">
      <div class="popover-header">
        <h3 class="popover-title">Plan details</h3>
        <button type="button" class="popover-close action-close" aria-label="Close">✕</button>
      </div>
      <div class="popover-body">
        <p>Includes unlimited projects and priority support.</p>
      </div>
      <div class="popover-arrow" aria-hidden="true"></div>
    </div>
  </div>
</div>