Bootstrap 4 Tooltips

Basically, Bootstrap 4 tooltips are a small popup box that display information whenever use moves the mouse pointer to the element such as link or button.

Bootstrap tooltip is used to display information when users hover, focus, or tap an element.

Creating Tooltip

To create bootstrap tooltip,follow the following steps.

  • Step1: Place data-toggle="tooltip" attribute to an element such as link or button.
  • Step2: Place title="Write Your Information" attribute to an element such as link or button and write your information within title attribute.This title message will be display in-front of the user after placing mouse pointer to the element.
  • Step3: Initialize bootstrap tooltip by jQuery through selecting link or button.

    Tooltip Initialization

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

Example

Hover over me Hover over me Hover over me

General Syntax

		<a href="#" data-toggle="tooltip" title="Learn Bootstrap">Hover over me</a>
	  
Try It Now

Source Code

	
		<div class="container my-2">
 <a href="#" data-toggle="tooltip" title="Learn Bootstrap">Hover over me </a>
</div>	
	
Try it yourself

Note: In the above example, the tooltip is initialized with the bootstrap tooltip method using jquery.

Tooltips Directions

Use data-placement attribute to change tooltip direction like top, bottom, left or the right side of the element.

Example

Top Tooltip Bottom Tooltip Left Tooltip Right Tooltip

General Syntax

		<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!"> 
  <span class="badge badge-success p-2">Top Tooltip</badge>
 </a>
	  
Try It Now

Source Code

	
		<div class="container my-2">
 <a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!"> 
     <span class="badge badge-success p-2">Top Tooltip</badge>
 </a>  
</div>	
	
Try it yourself

Note: In the above example data attribute data-placement is used to provide tooltip direction.

Our Tutorials

Bootstrap 4 Tooltips
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS