Tooltips

Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Examples

Hover over the links below to see tooltips. add data-skin="light" for light tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. 

<p class="muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip"
    title="Default tooltip" class="text-info"> you probably</a> haven't heard of
  them.
  Photo booth beard raw
  denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie
  sustainable
  quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip"
    class="text-info">have a</a> terry richardson vinyl chambray. Beard
  stumptown,
  cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's
  cleanse
  vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip"
    title="Another one here too" class="text-success">whatever keytar</a>, scenester farm-to-table
  banksy
  Austin
  <a href="#" data-toggle="tooltip" title="" data-original-title="The last tip!">twitter
    handle</a>
  freegan cred raw denim single-origin coffee viral.
</p>

Directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. 

<button type="button" class="btn btn-secondary mr-4 mb-2" data-toggle="tooltip"
  data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary mr-4 mb-2" data-toggle="tooltip"
  data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary mr-4 mb-2" data-toggle="tooltip"
  data-placement="bottom" title="Tooltip on bottom" data-skin="light">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary mr-4 mb-2" data-toggle="tooltip"
  data-placement="left" title="Tooltip on left" data-skin="light">
  Tooltip on left
</button>

For more details please visit Bootstrap official site. Bootstrap Documentation