How to add a tooltip to a div using JavaScript?
Last Updated :
04 Apr, 2023
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
Share your thoughts in the comments
Please Login to comment...