How to Add Tooltips Using Bootstrap

It is always nice to be able to provide users with hints about how to complete a form field or what information to provide. Using Bootstrap's tooltip feature we can easily accomplish this.

Here we can see an example of the button with tooltip that we will be creating in this lesson. Hover over the button to see the tooltip.

STEP 1

The first thing we need to do is ensure that we have correctly linked to the required Bootstrap files.

We will start with a basic template and place references to the required Bootstrap css, jQuery, and Bootstrap js files in the head section as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tooltip example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
	</body>
</html>

STEP 2

Next, we shall create a simple button:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tooltip example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<button type="button" class="btn btn-success">
			UPLOAD
		</button>
	</body>
</html>

At this stage all we have is a simple green button with the word UPLOAD on the button.  

STEP 3

Now, suppose we wish to add a tooltip to the button so that when the user hovers over the button they see some more information about what the button may be used for.

We add the required data-toggle attribute to the button as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tooltip example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="This is an example of a tooltip">
			UPLOAD
		</button>
	</body>
</html>

The data-placement attribute is set to 'right' in the example above.  The four options are:

  • left
  • right
  • top
  • bottom

STEP 4

At stage, the tooltip will not work.  We still need to initiate the javascript call to the tooltip function. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tooltip example</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script>
			$(function () {
			  $('[data-toggle="tooltip"]').tooltip()
			})
		</script>
	</head>
	<body>
		<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="This is an example of a tooltip">
			UPLOAD
		</button>
	</body>
</html>

 

Want to Learn More?

Become a member and get access to the member only area of this site.

LEARN MORE

Comments

Your email address will not be published.

PHP for Beginners

Would you like lifetime access to the hugely successful PHP for Beginners course? Click here to find out how.

FREE Code Snippets

FREE hints and tips delivered direct to you once per month.