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 = "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 " > w3wiki </ h1 > < h2 class = "h4 text-center" > A Computer Science Portal for Beginner </ 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 " > w3wiki </ 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