While creating web-applications, Bootstrap is one of the most widely used CSS framework to build responsive website and make make beautiful layout. Not only this bootstrap allows to make better looking Modal pop-up and allows to show a better looking text on hovering over an element which is called tooltip, so in this article, I will show you how we can create tooltip using Bootstrap 4.

What is tooltip in Bootstrap?

Tooltip in bootstrap is a small pop-up text which appear on hovering an html element foa specific period of time.

You can create tooltip on any element without bootstrap also using HTML 5 attribute "title" but it doesn't look good, for example if your HTML looks like this

<a href="javascript:void(0)" title="Tool tip without bootstrap">Hover over</a>

Tooltip output

tooltip-without-bootstrap-example-min.png

Above shows example of tooltip using HTMl 5 attribute "title" without using Bootstrap.

Tooltip example using Bootstrap

Now, let's take a look at an example of tooltip with bootstrap.

To Create bootstrap tool-tip, you need to use three atrribute

  • data-toggle="tooltip", which makes data appear on pop-up
  • title="Tooltip tiitle", text of tooltip
  • data-placement="top", position of tooltip, it can be "left, right, top, bottom"

Considering above attributes, and once you have included bootstrap javascript and css files, you can have HTML like below

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >


<a data-toggle="tooltip" href="javascript:void(0)" data-placement="bottom" title="I'm a tooltip">Hover me</a>


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>

and javascript code as below

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

You will get output as below

You can try using below fiddle link

One more example

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >


<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>

<div class="navbar tooltip-demo">
            <ul class="nav">
              <li><a class="top" title="Tooltip on top" data-placement="top" data-toggle="tooltip" href="#" >Tooltip on top</a></li>
              <li><a class="right" title="Tooltip on right" data-placement="right" data-toggle="tooltip" href="#">Tooltip on right</a></li>
              <li><a class="bottom" title="Tooltip on bottom" data-placement="bottom" data-toggle="tooltip" href="#" >Tooltip on bottom</a></li>
              <li><a class="left" title="Tooltip on left" data-placement="left" data-toggle="tooltip" href="#">Tooltip on left</a></li>
            </ul>
       </div>

Output:

You may also like to read:

Adding bootstrap datetime picker in HTML Form ( Example with step by step procedure )

Showing Month and Year only in Bootstrap Datepicker