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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pin It on Pinterest

Share This

Share this post with your friends!

Share This

Share this post with your friends!