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 here.

Comments

Your email address will not be published.

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.