Bootstrap tooltips customization with Examples

|
| By Webner

How to create and customize Bootstrap tooltips (with examples)

A tooltip is a small pop up that appears when user places mouse pointer over an element such as link, button, icon or any other element to provide information about the element being hovered.

How to create a Tooltip?

To create a tooltip, we need to add data-toggle=”tooltip” attribute to an element. We need to use title attribute to display the tooltip text when mouse is hovered on an element.

Now, let’s see how to create Bootstrap tooltip.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  	<title>Bootstrap Tooltip Example</title>  
  	<meta charset="utf-8">  
  	<meta name="viewport" content="width=device-width, initial-scale=1">  
  	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
</head>
<body>
	<div class=”container”>
		<div class="row"style="margin-bottom:50px;"><div class="col-lg-12"></div></div> 
		<a href="#" data-toggle="tooltip" title="Some text on hovering on me.">Hover mouse over me</a>
	</div>
</body>
</html>

The output of above HTML sample is shown in following screenshot:
Bootstrap Webner                                                                                       Screenshot 1

In the screenshot 1, we can see that text specified in title attribute is shown in tooltip box whose background-color is black.

Customizing the Tooltip

We can observe from screenshot 1 that tooltip is always displayed in rectangle shape without small arrow sign and by default, tooltip is shown always on bottom right position. To display bootstrap tooltip with small arrow sign, we can use following jquery script.

<script>
$(document).ready(function(){
    		$('[data-toggle="tooltip"]').tooltip();   
});
</script>

With above jquery code, following output is displayed.
Bootstrap Webner                                                                                               Screenshot 2

From screenshot 2, we can see that tooltip is displayed in little circled rectangle and at top.

Setting directions of Tooltip

By default, tooltip is shown at top position of an element. We can set directions (top, bottom, left, right) to show tooltip with data-placement attribute as follows:

<div class=”container”>
<div class=”row”style=”margin-bottom:50px;”><div class=”col-lg-12″></div></div>
<a href=”#” data-toggle=”tooltip” data-placement=”top” title=”Some text on top.” >Top</a>
<a href=”#” data-toggle=”tooltip” data-placement=”bottom” title=”Some text on bottom.”>Bottom</a>
<a href=”#” data-toggle=”tooltip” data-placement=”left” title=”Some text on left.”>Left</a>
<a href=”#” data-toggle=”tooltip” data-placement=”right” title=”Some text on right.”>Right</a>
</div>

The above HTML sample shows the positions of tooltip on hovering of links in screenshot 3.
Bootstrap WebnerBootstrap Webner
Bootstrap WebnerBootstrap Webner
Screenshot 3

So, we can see that how simple and pretty it is to create nicely looked tooltips with bootstrap.

Leave a Reply

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