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>