Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Building Tooltip using CSS
A tooltip is used to display extra information when a user hovers over an element. The tooltip text can be positioned in different directions such as top, bottom, right, and left using CSS positioning properties.
Syntax
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
Basic Tooltip Structure
To create a tooltip, you need a container element and a nested span element for the tooltip text −
<div class="tooltip">
Hover over me
<span class="tooltiptext">Tooltip text here</span>
</div>
Example: Basic Top Tooltip
The following example creates a basic tooltip that appears above the element −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #333;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #333;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -70px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>CSS Tooltip Example</h2>
<div class="tooltip">
Hover over me
<span class="tooltiptext">This is a tooltip!</span>
</div>
</body>
</html>
A text "Hover over me" with a dotted underline appears. When hovered, a dark tooltip box with white text "This is a tooltip!" appears above the text.
Example: Right Tooltip
To position the tooltip on the right side, use the left property with a value of 105% −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #333;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Right Tooltip</h2>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Right side tooltip</span>
</div>
</body>
</html>
The tooltip appears to the right side of the hovered text instead of above it.
Example: Left Tooltip
For a left-positioned tooltip, use the right property with 105% −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #333;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #333;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<h2>Left Tooltip</h2>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Left side tooltip</span>
</div>
</body>
</html>
The tooltip appears to the left side of the hovered text.
Example: Animated Tooltip
Add smooth fade-in animation using the transition and opacity properties −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #007bff;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #007bff;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -70px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<h2>Animated Tooltip</h2>
<div class="tooltip">
Hover over me
<span class="tooltiptext">Smooth fade-in effect</span>
</div>
</body>
</html>
The tooltip fades in smoothly over 0.3 seconds when hovered, creating a professional animated effect.
Conclusion
CSS tooltips are created using position: relative for the container and position: absolute for the tooltip text. The visibility property controls when tooltips appear on hover, and transitions can add smooth animations for better user experience.
Updated on: 2026-03-15T14:45:22+05:30
160 Views
Advertisements