Data Attributes

Automatically activate Bootstrap popovers and tooltips, even when loaded via AJAX.

Bootstrap’s native data-bs-toggle="popover" and data-bs-toggle="tooltip" are not initialized automatically. By default they don’t do anything because they rely on JavaScript to initialize themselves. With Bootstrap Extentions, these extensions automatically initialize popovers and tooltips. Plus, we recognize toggles loaded via AJAX or fetch.

How it works

On page load, every element matching data-bs-toggle="popover" or data-bs-toggle="tooltip" is initialized for you — no new bootstrap.Popover(...) boilerplate required.

A MutationObserver also watches the document, so any matching elements added after page load — for example, markup returned from an AJAX or fetch() request — are initialized automatically as they enter the DOM. Initialization uses getOrCreateInstance() internally, so re-scanning an element that is already initialized is a harmless no-op.

Tooltips

Add data-bs-toggle="tooltip" and a data-bs-title. No JavaScript needed.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-title="Tooltips are initialized automatically.">
  Hover over me
</button>

Tooltips support directional placement via data-bs-placement.

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="On top">Top</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="On the right">Right</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="On the bottom">Bottom</button>
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="On the left">Left</button>

Popovers

Add data-bs-toggle="popover" with a data-bs-title and data-bs-content.

<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

Loaded via AJAX

The button below uses the Ajax Load component (data-ajax-load) to pull an HTML fragment into the page. The tooltip and popover in that response are not initialized by any custom code — Ajax Load simply drops the markup in, and the MutationObserver picks the toggles up as soon as they’re inserted.

Click the button to load a tooltip and popover via Ajax Load.

<button data-ajax-load data-target="#ajax-attributes-target" data-load="/ajax/data_attributes" class="btn btn-success">
  Load content via Ajax Load
</button>

<div id="ajax-attributes-target" class="mt-3">
  <div class="alert alert-info mb-0">Click the button to load a tooltip and popover via Ajax Load.</div>
</div>