1. Components
2. UI Elements
3. Tooltips

Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read the Official Bootstrap Documentation for a full list of instructions and other options.

---

Basic Example

Hover over the links below to see tooltips.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

$('[data-toggle="tooltip"]').tooltip();

---

Contextual Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

<button class="btn btn-primary" data-placement="top" title="Tooltip Primary">Primary</button>

$('.btn-primary').tooltip({
  template: '<div class="tooltip tooltip-primary" role="tooltip">
              <div class="arrow"></div>
              <div class="tooltip-inner"></div>
            </div>'
})