CSS Tooltips

This CSS property is a good way to display extra information about something when the user moves the mouse cursor over an element.

Example:

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;

font-size:20px;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">
<h3>Move the mouse over the text below:</h3>
<div class="tooltip">Hover over me
 <span class="tooltiptext">This is tooltip text</span>
</div>
</body>
</html>

OUTPUT:

Tooltip information in four ways:

Top of the element
Left side of the element
Right side of the element
Bottom of the element

Top Tooltip:

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 100%;
   left: 50%;
   margin-left: -60px;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Top Tooltip Example</h2>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong> Welcome to I2Tutorials</strong>
 <span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

OUTPUT:

Bottom Tooltip:

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: 100%;
   left: 50%;
   margin-left: -60px;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Bottom Tooltip Example</h2>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong> Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

OUTPUT:

Left Tooltip:

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: -5px;
   right: 105%;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong> Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

OUTPUT:

Right Tooltip:

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: red;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: -5px;
   left: 105%;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Right Tooltip Example</h2>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong> Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology.</span>
</div>
</body>
</html>

OUTPUT: