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 Documentationfor 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>'})