How to use Bootstrap tooltip

This is a simple tutorial of bootstrap tooltip example. bootstrap is very attractive library of twitter.
Twitter Bootstrap is powerful library which has included Jquery,javascript and css.
You can use bootstrap tooltip for alert message ,validation message,display information etc.You can trigger tooltip on call of tooltip() method.

Also checkout other tooltip tutorials,

Simple Steps to Create Tooltips with Bootstrap 3

First we Include js and css file of twitter library.
Select Code
1
2
3
4
5
6
7
<link href="assets/css/bootstrap.css" rel="stylesheet">  
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">  
    <link href="assets/css/docs.css" rel="stylesheet">  
   <script src="assets/js/jquery.js"></script>  
   <script src="assets/js/bootstrap-tooltip.js"></script>  
   <script src="assets/js/bootstrap-popover.js"></script>  
   <script src="assets/js/bootstrap-transition.js"></script>
Now we will create html element in file for access tool tip:
Select Code
1
<a href="#" rel="tooltip" data-original-title="hello">hover on me</a>

and call javascript method for tooltip in page:

Select Code
1
2
3
4
5
<script type="text/javascript">  
  $(document).ready(function () {  
    $("[rel=tooltip]").tooltip();  
  });  
</script>

We also passed parameter for tool tip position and delay:

Example:

Select Code
1
2
3
$(document).ready(function(){  
                $(‘#example’).tooltip({‘placement’:‘top’, ‘trigger’ : ‘hover’});  
            });
More Option Are:
Nametypedefaultdescription
animationbooleantrueapply a css fade transition to the tooltip
placementstring|function‘top’how to position the tooltip – top | bottom | left | right
selectorstringfalseIf a selector is provided, tooltip objects will be delegated to the specified targets.
titlestring | functiondefault title value if `title` tag isn’t present
triggerstring‘hover’how tooltip is triggered – hover | focus | manual
delaynumber | object0delay showing and hiding the tooltip (ms) – does not apply to manual trigger typeIf a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Result
bootstrap-tooltip

Download Source Code and Live Demo Of Bootstrap tooltip

Please feel free to send queries to me using below comment section.

  • Francisco

    Thanks a lot! I was looking for a clear example on how to use this bootstrap’s component. This was very helpful