Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a tooltip to a div using JavaScript?
To add a tooltip to a div using JavaScript, first create a function that will generate the tooltip content. Next, add an event listener to the div that will call the function and display the tooltip when the div is hovered over. Finally, use CSS to style the tooltip and position it appropriately.
A tooltip is a small text box that appears when a user hovers over a specific element on a webpage, such as a button, link, or image. The tooltip typically contains additional information or context about the element that the user is hovering over. Tooltips are commonly used in user interfaces to provide users with additional information about a specific element without cluttering the main interface. They are also used to provide users with additional context or instructions for using a specific feature or element.
Approach
First, create a div element in HTML and give it an id or class name to be able to target it with JavaScript.
<div id="myDiv">This is my div</div>
Next, create a tooltip element, such as a span, and give it a class name.
<div id="myDiv">This is my div <span class="tooltip">This is my tooltip</span></div>
Next, in JavaScript, use the document.getElementById or document.querySelector method to select the div element, and add an event listener for the mouseover and mouseout events −
const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", showTooltip);
myDiv.addEventListener("mouseout", hideTooltip);
Within the showTooltip function, use the document.querySelector method to select the tooltip element and set its display property to "block" to make it visible.
function showTooltip() {
const tooltip = document.querySelector(".tooltip");
tooltip.style.display = "block";
}
Within the hideTooltip function, use the document.querySelector method to select the tooltip element and set its display property to "none" to make it invisible.
function hideTooltip() {
const tooltip = document.querySelector(".tooltip");
tooltip.style.display = "none";
}
You can also use the CSS to style the tooltip element, such as adding a background color and text color −
.tooltip {
display: none;
background-color: yellow;
color: black;
}
Example
Here is a complete working example of the approach described above −
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
display: none;
background-color: yellow;
color: black;
position: absolute;
}
</style>
<title>Tooltip to a div</title>
</head>
<body>
<div id="myDiv">
This is my div
<span class="tooltip">This is my tooltip</span>
</div>
<script>
const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", showTooltip);
myDiv.addEventListener("mouseout", hideTooltip);
function showTooltip() {
const tooltip = document.querySelector(".tooltip");
tooltip.style.display = "block";
}
function hideTooltip() {
const tooltip = document.querySelector(".tooltip");
tooltip.style.display = "none";
}
</script>
</body>
</html>
This code will create a div with the text "This is my div" and a tooltip element that says "This is my tooltip". When the mouse hovers over the div, the tooltip will be displayed, and when the mouse leaves the div, the tooltip will disappear. The CSS is used to style the tooltip element, giving it a yellow background and black text.
The JavaScript code uses the addEventListener method to listen for mouseover and mouseout events on the div and calls the appropriate functions to show and hide the tooltip.
10K+ Views
