How to add a tooltip to a div using JavaScript?

Last Updated : 04 Apr, 2023

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

html

< 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:

html

<!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:

html

<!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>