Bootstrap Tooltips

Bootstrap Tooltips

A Tooltip is used to provide interactive textual hints to the user about the element when the user hovers over an item.

Initialization:

Bootstrap tooltips are not enabled by default. They require initialization before you can use them.

NOTE: One way to do this is to place the following code .

<script>
$(function () {
 $('[data-toggle="tooltip"]').tooltip()
})
</script>

Create tooltip:

The data-toggle=” tooltip” attribute is used to create a tooltip. The title attribute indicates the text that should be displayed inside the tooltip.

Example:

<div class="container">
  <ul class="list-inline">
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" title="Another tooltip">Another tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width .">Large tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" title="The last tip!">Last tooltip</a>
    </li>
  </ul>
</div>

Script:

<script>
$(document).ready(function(){
 $('[data-toggle="tooltip"]').tooltip();
});
</script>

OUTPUT:

Setting the Directions of Tooltips:

Tooltips to appear on top, right, bottom and left sides of an element.

Positioning of Tooltips via Data Attributes:

Positioning of Tooltips via Data Attributes.

Example:

<div class="container">
  <ul class="list-inline">
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" data-placement="bottom" title="A much longer tooltip to demonstrate.">Large tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last tooltip</a>
    </li>
  </ul>
</div>

Script:

<script>
$(document).ready(function(){
 $('[data-toggle="tooltip"]').tooltip();
});
</script>

OUTPUT:

Positioning of Tooltips via JavaScript:

Set the direction of tooltips via JavaScript.

Example:

<div class="container" style="margin: 100px 60px;">
  <ul class="list-inline">
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" class="tip-top" title="Default tooltip">Tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" class="tip-right" title="Another tooltip">Another tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" class="tip-bottom" title="A much longer tooltip to demonstrate.">Large tooltip</a>
    </li>
    <li class="list-inline-item">
       <a href="#" data-toggle="tooltip" class="tip-left" title="The last tip!">Last tooltip</a>
    </li>
  </ul>
</div>

Script:

<script>
$(document).ready(function(){
  $(".tip-top").tooltip({
    placement : 'top'
  });
  $(".tip-right").tooltip({
    placement : 'right'
  });
  $(".tip-bottom").tooltip({
    placement : 'bottom'
  });
  $(".tip-left").tooltip({
    placement : 'left'
  });
});
</script>

OUTPUT: