Tooltips & Popovers

Tooltips and Popovers show a small piece of extra text when a user hovers or clicks an element. Unlike Modal or Collapse, Bootstrap 4 does not auto-activate these two from markup alone — every tooltip and popover on the page has to be explicitly turned on with a jQuery call, usually once, when the page loads. We'll wire up a difficulty-icon tooltip and a "?" help popover for TrailMap.

Tooltips Require Explicit Initialization

You mark an element as a tooltip trigger with data-toggle="tooltip" and a title attribute for the text, but that alone does nothing. Bootstrap 4 needs you to call .tooltip() yourself on those elements — commonly for every one at once, inside a $(document).ready() block.

<i class="fa fa-exclamation-circle" data-toggle="tooltip" title="Moderate difficulty"></i>
// Without this, the markup above does nothing at all
$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
Note: This trips people up who assume the data-toggle attribute API is fully self-contained the way it is for Modal or Collapse. For Tooltip and Popover, it isn't — the attribute only supplies configuration, and .tooltip()/.popover() is what actually activates it. Skip that call and hovering does nothing.

Placement and Title

data-placement controls which side the tooltip appears on: "top", "bottom", "left", or "right" (default "top"). Once initialized, Bootstrap actually reads the tip text from a data-original-title attribute internally — it copies your title there automatically so the browser's native title tooltip doesn't also show up.

<i class="fa fa-exclamation-circle" data-toggle="tooltip" data-placement="right" title="Moderate difficulty"></i>

Popovers: title + content

Popovers work the same way but show more text and support a heading. Use data-toggle="popover", a title for the heading, and data-content for the body text — then initialize with .popover(), just like tooltips.

<a tabindex="0" class="btn btn-sm btn-outline-secondary"
  data-toggle="popover" title="What does difficulty mean?"
  data-content="Based on distance, elevation gain, and terrain.">?</a>

Worked Example: TrailMap Difficulty Icon and Help Popover

On a trail card, a small icon next to the difficulty badge shows a tooltip on hover, and a "?" button next to it opens a popover explaining how difficulty is calculated. Both need the same one-time initialization.

<span class="badge badge-warning">
  Moderate
  <i class="fa fa-info-circle"
    data-toggle="tooltip" data-placement="top"
    title="620 ft gain over 4.2 mi"></i>
</span>

<a tabindex="0" class="btn btn-sm btn-outline-secondary rounded-circle"
  data-toggle="popover" data-placement="right"
  title="How difficulty is set"
  data-content="Trail submitters propose a rating; moderators confirm it against distance and elevation gain.">?</a>

And the required initialization, placed once for the whole page:

$(document).ready(function() {
  // Turn on every tooltip trigger on the page
  $('[data-toggle="tooltip"]').tooltip();

  // Turn on every popover trigger on the page
  $('[data-toggle="popover"]').popover();
});
Up next: Scrollspy is the last jQuery-driven component in this section — it highlights nav links automatically as the user scrolls a long page.