Bootstrap Tooltip Plugin

A tooltip is a small pop-up which appears when a cursor is positioned over an icon, image, hyperlink or other element in a graphical user interface. It is small, boxed text message which provides some detail about the text when the mouse pointer hovers over given text. Tooltips are helpful for new users because they enable the user to learn about each object by hovering their mouse over them.

also read:

We can create tooltips by using following two ways:

  • Via Data Attributes
  • Via JavaScript

Bootstrap Tooltip via Data Attributes

We can create bootstrap tooltip by using the attribute data-toggle=”tooltip” within the anchor element. For instance, if we want to display tooltip on left side, then we use the attribute data-placement=”left” and similarly for right, top and bottom positions. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
   $(function(){
      $("[data-toggle='tooltip']").tooltip();
   });
</script>
</head>
<body>
<div class="container">
<h2>Tooltip for Buttons</h2><br>
<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="left" title="Left Tooltip">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="top" title="Top Tooltip">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="bottom" title="Bottom Tooltip">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip"
data-placement="right" title="Right Tooltip">Tooltip on right</button>
</body>
</body>
</html>

Bootstrap Tooltip Data Attributes Example

Bootstrap Tooltip via JavaScript

It’s also possible to display tooltip on top, left, right and bottom sides of an element by using javascript code as shown in the below example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $("#top").tooltip({
      placement:'top'
   });
   $("#right").tooltip({
         placement:'right'
   });
   $("#bottom").tooltip({
         placement:'bottom'
   });
   $("#left").tooltip({
         placement:'left'
   });
});
</script>
</head>
<body>
<div class="container">
<h2>Tooltip using JavaScript</h2><br>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="top"
data-placement="top" title="Top Tooltip">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="right"
data-placement="right" title="Right Tooltip">Tooltip on right</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="bottom"
data-placement="bottom" title="Bottom Tooltip">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" id="left"
data-placement="left" title="Left Tooltip">Tooltip on left</button>
</div>
</body>
</body>
</html>

Bootstrap Tooltip JavaScript Example

Bootstrap Tooltip Options

The following table shows options which can be used with tooltip:

OptionType ValueDefault ValueDescription
animationbooleantrueIt applies fade transition to tooltips.
htmlbooleanfalseIt inserts html elements to tooltip.
placementstring/functiontopIt sets the position of tooltip such as top, left, right and bottom.
selectorstringfalseDelegate tooltip objects to specified targets.
titlestring/functionfalseIt sets default value if title attributes is not present.
triggerstring’hover focus’It defines how tooltip will be triggered such as click, hover, focus and manual.
delaynumber/object0It inserts delay before tooltip is showed or hidden in ms which does not apply to manual trigger type.
containerstring/falsefalseIt appends tooltip to a specific element.

Bootstrap Tooltip Methods

The following are the methods for tooltip:

MethodDescriptionExample
$().tooltip(options)It attaches tooltip handler to an element collection.$().tooltip(options)
.tooltip(‘toggle’)It toggles tooltip element.$(‘#element’).tooltip(‘toggle’)
.tooltip(‘show’)It shows elements tooltip.>$(‘#element’).tooltip(‘show’)
.tooltip(‘hide’)It hides an elements tooltip.>$(‘#element’).tooltip(‘hide’)
.tooltip(‘destroy’)It hides and destroys elements tooltip.>$(‘#element’).tooltip(‘destroy’)

The following example shows use of methods:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
     $(".show-tt").click(function(){
        $(".hover-tooltip a").tooltip('show');
     });
     $(".hide-tt").click(function(){
	         $(".hover-tooltip a").tooltip('hide');
     });
     $(".toggle-tt").click(function(){
	         $(".hover-tooltip a").tooltip('toggle');
     });
     $(".destroy-tt").click(function(){
	         $(".hover-tooltip a").tooltip('destroy');
     });
 });
</script>
</head>
<body>
<div class="container">
<h2>Tooltip using Methods</h2><br>
<p class="hover-tooltip">
<a href="#" data-toggle="tooltip" title="tooltip demo">Tooltip on Methods</a></p>
<button type="button" class="btn btn-warning show-tt">Show Tooltip</button>
<button type="button" class="btn btn-info hide-tt">Hide Tooltip</button>
<button type="button" class="btn btn-success toggle-tt">Toggle Tooltip</button>
<button type="button" class="btn btn-danger destroy-tt">Destroy Tooltip</button>
</body>
</body>
</html>

Bootstrap Tooltip using Methods Example

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*