Tooltip & Popover

Tooltip and Popover are close cousins — both show extra text near an element on hover or click — but they're the two plugins in this whole suite that refuse to work out of the box. Unlike Modal or Dropdown, adding a data-toggle attribute alone does nothing. You must explicitly initialize every tooltip and popover with a line of jQuery, typically inside $(document).ready().

Why the extra step? Tooltips and popovers are opt-in for a performance reason: scanning the whole page for every possible tooltip on every page load would be wasteful. Bootstrap 3 makes you tell it exactly which selector to activate, and — since there's no Popper.js in Bootstrap 3 — its own plugin code handles all the positioning math for data-placement itself.

Required Initialization

Both plugins need this call before they'll do anything. Run it once the DOM is ready:

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover();
});
Bootstrap-3-specific: Bootstrap 4 and 5 require the same explicit initialization pattern, but they also require Popper.js to be loaded for positioning to work at all. Bootstrap 3 needs nothing beyond jQuery and bootstrap.min.js — its Tooltip/Popover code computes placement itself.

Tooltip: title + data-placement

A tooltip's text comes from the standard title attribute; data-placement picks which side it appears on (top, bottom, left, right).

<!-- TrailMap: tooltip on a difficulty icon -->
<i class="fa fa-fire text-danger"
   data-toggle="tooltip"
   data-placement="top"
   title="Hard: steep, sustained climb"></i>

Popover: adds data-content

A popover is a bigger, click-triggered version of a tooltip: title becomes its heading, and data-content supplies the body text.

<!-- TrailMap: popover on a "?" help icon -->
<a href="#" class="btn btn-default btn-xs"
   data-toggle="popover"
   data-placement="right"
   title="Difficulty Rating"
   data-content="Based on elevation gain, trail surface, and average hiker time.">?</a>

With the initialization block from above already on the page, both of these work immediately — hovering the difficulty icon shows the tooltip, and clicking the "?" opens the popover.

Up next: Alert & Button Plugins covers two more small plugins: what makes an alert's close button actually work, and how to show a loading state on a button.