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.

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).

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);
});