JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Bootstrap Tooltip Plugin

July 22, 2014 by Krishna Srinivasan Leave a Comment

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:

  • Bootstrap Setup
  • Bootstrap Typography

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tooltip Data Attributes Demo

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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tooltip JavaScript Demo

Bootstrap Tooltip JavaScript Example

Bootstrap Tooltip Options

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

Option Type Value Default Value Description
animation boolean true It applies fade transition to tooltips.
html boolean false It inserts html elements to tooltip.
placement string/function top It sets the position of tooltip such as top, left, right and bottom.
selector string false Delegate tooltip objects to specified targets.
title string/function false It sets default value if title attributes is not present.
trigger string ’hover focus’ It defines how tooltip will be triggered such as click, hover, focus and manual.
delay number/object 0 It inserts delay before tooltip is showed or hidden in ms which does not apply to manual trigger type.
container string/false false It appends tooltip to a specific element.

Bootstrap Tooltip Methods

The following are the methods for tooltip:

Method Description Example
$().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:

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Tooltip using Methods Example

Bootstrap Tooltip using Methods Example

Filed Under: Bootstrap Tagged With: Bootstrap Plugin

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.

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved