How to add a tooltip to a div using JavaScript? - GeeksforGeeks

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>
Output:Before hovering over div:
After hovering over div:
Browser Support: Browsers which support Tooltip:
Opera
Internet Explorer
Safari
Google Chrome
Firefox
JavaScript-Misc
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?