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
Building Tooltip using CSS
A tooltip is used to set extra information. This is visible on the web page when visitor moves the mouse pointer over an element. The tooltip text can be given directions such as top, bottom, right, and left.
Create a Tooltip
To create a tooltip, create a Tooltip container and set the text for the Tooltip in it. The Tooltip text is set using the <span> −
<div class="toolTip"> Hover over me <span class="toolText">Some toolTip text</span> </div>
The Tooltip is positioned using the position property −
position: relative;
However, the Tooltip text is positioned using position and z-index properties −
position: absolute; z-index: 1;
The Tooltip is visible when the mouse cursor is placed on the text. We have used the visibility property −
.toolTip:hover .toolText {
visibility: visible;
}
Example
The following is the code for building the Tooltip text −
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}
.toolTip {
position: relative;
display: inline-block;
border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
visibility: hidden;
width: 160px;
background-color: #721cd4;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -35px;
left: -10px;
z-index: 1;
}
.toolTip:hover .toolText {
visibility: visible;
}
</style>
<body>
<h1>CSS - Tooltip Example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip</h2>
</body>
</html>
Create a Right Tooltip
The Tooltip is positioned on the right using the left property −
left: 101%;
Example
Let us see an example to create a right tooltip on an HTML web page −
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}
.toolTip {
position: relative;
display: inline-block;
border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
visibility: hidden;
width: 160px;
background-color: #721cd4;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -35px;
left: 101%;
z-index: 1;
}
.toolTip:hover .toolText {
visibility: visible;
}
</style>
<body>
<h1>CSS - Right Tooltip Example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip on the right.</h2>
</body>
</html>
Create a Left Tooltip
The Tooltip is positioned on the left using the right property −
right: 101%;
Example
Let us see an example to create a left tooltip on an HTML web page −
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}
.toolTip {
position: relative;
display: inline-block;
border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
visibility: hidden;
width: 160px;
background-color: #721cd4;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -35px;
right: 101%;
z-index: 1;
}
.toolTip:hover .toolText {
visibility: visible;
}
</style>
<body>
<h1>CSS - Left Tooltip Example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip on the left.</h2>
</body>
</html>
Animate a Tooltip
Use the transition property to animate a tooltip. The tooltip will be fade in using the transition and opacity properties. The 2s is to set the visibility of the tooltip from zero to completely visible in two seconds −
.toolTip .toolText {
opacity: 0;
transition: opacity 2s;
}
Example
Let us see an example to animate a tooltip on an HTML web page. Here, we have demonstrated a right tooltip and animated it −
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
}
.toolTip {
position: relative;
display: inline-block;
border-bottom: 3px double rgb(255, 0, 0);
}
.toolTip .toolText {
visibility: hidden;
width: 160px;
background-color: #721cd4;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -35px;
left: 101%;
z-index: 1;
opacity: 0;
transition: opacity 2s;
}
.toolTip:hover .toolText {
visibility: visible;
opacity: 1;
}
</style>
<body>
<h1>CSS - Right Tooltip Example</h1>
<div class="toolTip">
Hover over me
<span class="toolText">Some toolTip text</span>
</div>
<h2>Hover over the above text to see the tooltip on the right.</h2>
</body>
</html>
144 Views
