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>