Open In App

How to add a tooltip to a div using JavaScript?

Last Updated : 04 Apr, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    
    <script src=
  </script>
    <script src=
  </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=
    <script src=
  </script>
    <script src=
  </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>


Output:
Before hovering over div:

After hovering over div:

Browser Support: Browsers which support Tooltip:

  • Opera
  • Internet Explorer
  • Safari
  • Google Chrome
  • Firefox


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads