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