How to add a tooltip to a div using JavaScript?

Last Updated : 31 Jul, 2019

Adding tooltip to div element displays a pop-up, whenever the mouse hovers over div.

Syntax:

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

Tooltip Methods:

.tooltip(“show”): It is used to show the tooltip.
.tooltip(“hide”): It is used to hide the tooltip.
.tooltip(options): It is used to activate the tooltip.
.tooltip(“destroy”): It is used to destroy the tooltip.
.tooltip(“toggle”): It is used to toggle the tooltip.

Tooltip Events:

show.bs.tooltip: Tooltip is about to show on the screen.
shown.bs.tooltip: Tooltip is fully shown on the screen.
hide.bs.tooltip: Tooltip is about to hide.
hidden.bs.tooltip: Tooltip is fully hidden.

Return Value: It returns a pop-up when user hovers over the div element.

Example 1:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
      Bootstrap Example 
  </title> 
    <meta charset="utf-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
</head> 
  
<body> 
  
    <div class="container"
         title="ToolTip"> 
        <h1 class="text-center "> 
          GeeksforGeeks 
      </h1> 
        <h2 class="h4 text-center"> 
          A Computer Science Portal for Geeks 
      </h2> 
  
    </div> 
  
    <script> 
        $(document).ready(function() { 
            $('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
  
</body> 
  
</html> 

Output:
Before hovering over div:

After hovering over div:

Example 2:

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
      Bootstrap Example 
  </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1"> 
    <link rel="stylesheet" 
          href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script> 
    <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
  </script> 
</head> 
  
<body> 
  
    <div class="container" 
         title="Wonders of the World"> 
        <h1 class="text-center "> 
          GeeksforGeeks 
      </h1> 
        <h2 class="h4"> 
          List of 7 Wonders of the World 
      </h2> 
        <ul> 
            <li>Great Wall of China</li> 
            <li>Petra</li> 
            <li>The Colosseum</li> 
            <li>Chichen Itza</li> 
            <li>Machu Picchu</li> 
            <li>Taj Mahal</li> 
            <li>Christ the Redeemer</li> 
        </ul> 
  
    </div> 
  
    <script> 
        $(document).ready(function() { 
            $('[data-toggle="tooltip"]').tooltip(); 
        }); 
    </script> 
  
</body> 
  
</html> 