Popovers

Documentation and examples for adding boodoo popovers — small, overlay content bubbles that sit on top of their reference element.

Overview

Popovers are a small content bubble that sit on top of their reference element. Add data-boodoo-toggle="popover" with a data-boodoo-title, or store the content in the title attribute. Clicking the trigger toggles the popover; it closes on outside tap and with Esc.

boodoo ships a dependency-free positioning engine, so no Popper is required.

Example: enable popovers

<button type="button"
        data-boodoo-toggle="popover" data-boodoo-title="Popover title"
        data-boodoo-content="And here's some amazing content.">
  Click to toggle popover
</button>

Placements

Four placement options are available: top, bottom, start (left), and end (right). Use data-boodoo-placement.

<button type="button" class="btn btn-outline-secondary" data-boodoo-toggle="popover" data-boodoo-placement="top"
  data-boodoo-content="Top popover">Top</button>
<button type="button" class="btn btn-outline-secondary" data-boodoo-toggle="popover" data-boodoo-placement="bottom"
  data-boodoo-content="Bottom popover">Bottom</button>
<button type="button" class="btn btn-outline-secondary" data-boodoo-toggle="popover" data-boodoo-placement="start"
  data-boodoo-title="Start" data-boodoo-content="Start placement">Start</button>
<button type="button" class="btn btn-outline-secondary" data-boodoo-toggle="popover" data-boodoo-placement="end"
  data-boodoo-content="End placement">End</button>

Dismiss on next click

Use the trigger option — data-boodoo-trigger="focus" makes the popover toggle on focus and dismiss on blur (good for toggle buttons).

Dismissible popover

<a tabindex="0" class="btn btn-lg btn-outline-primary" role="button" data-boodoo-toggle="popover"
  data-boodoo-trigger="focus" data-boodoo-title="Dismissible popover"
  data-boodoo-content="And here's some amazing content. Focus-managed for accessibility.">
  Dismissible popover
</a>

JavaScript

// Enable all popovers on the page
document.querySelectorAll('[data-boodoo-toggle="popover"]').forEach(function (el) {
  if (!boodoo.Popover.getInstance(el)) boodoo.Popover.getOrCreateInstance(el);
});

Modern browsers natively support popups using the popover and popovertarget attributes. boodoo styles native popovers out of the box:

<button type="button" class="btn btn-outline-primary" popovertarget="myPopover">
  <span>Toggle Native Popover</span>
</button>

<div id="myPopover" popover class="popover p-3">
  <strong><span>Native Popover</span></strong>
  <p class="mb-0"><span>Zero JavaScript required.</span></p>
</div>

CSS Anchor Positioning & @starting-style

Modern browsers (Chrome 125+, Safari/Firefox) support CSS Anchor Positioning and @starting-style discrete property transitions. Boodoo harnesses these to tether popovers to triggers and animate them from display: none with zero positioning JavaScript:

<!-- Button sets anchor name -->
<button type="button" class="btn btn-primary" id="anchorBtn" popovertarget="anchorPopover" style="anchor-name: --my-anchor;">
  <span>Anchor Popover</span>
</button>

<!-- Popover is tethered using CSS position-anchor with auto flip -->
<div id="anchorPopover" popover class="popover p-3 shadow-lg" style="position-anchor: --my-anchor; top: anchor(bottom); left: anchor(center); transform: translateX(-50%); position-try-options: flip-block, flip-inline;">
  <strong><span>CSS Anchor Positioned</span></strong>
  <p class="mb-0 text-muted"><span>Fluidly tethered and flips vertically without JS math.</span></p>
</div>