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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
Output:
Before hovering over div:
After hovering over div:
Browser Support: Browsers which support Tooltip:
- Opera
- Internet Explorer
- Safari
- Google Chrome
- Firefox
Recommended Posts:
- How to add tooltip to HTML table cell without using JavaScript ?
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- Building Tooltip using CSS
- How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
- How to Create Link Tooltip Using CSS3 and jQuery ?
- How to clear the content of a div using JavaScript?
- Print the content of a div element using JavaScript
- How to find the width of a div using vanilla JavaScript?
- How to append HTML code to a div using JavaScript ?
- How to append data to <div> element using JavaScript ?
- How to rotate an HTML div element 90 degrees using JavaScript ?
- How to get the <div> height using JavaScript ?
- How to hide div element by default and show it on click using JavaScript and Bootstrap ?
- How to Combine multiple elements and append the result into a div using JavaScript ?
- How to Change Background Color of a Div on Mouse Move Over using JavaScript ?
- How to remove specific div element by using JavaScript?
- How to scroll to an element inside a div using javascript?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
