How to add a tooltip to a div using JavaScript?
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
.png)
