Html & Html5

The World's best Software Development Study Portal


Introduction to CSS

CSS Tooltip

If in case we want to display more information when our user moves the cursor over the element, than the tooltip property we can use.

And this tooltip property we can set to any direction top, bottom, left and right.

Let's understand this by the following program:-

<!DOCTYPE html>



.tooltip {

      position: relative;



.tooltip .tooltiptext {

      visibility: hidden;

      width: 120px;

      background-color: red;

      color: #000;

      text-align: center;

      position: absolute;

      z-index: 1;


.tooltip:hover .tooltiptext {

      visibility: visible;




<div class="tooltip"> Welcome to ITC Training classes

<span class="tooltiptext"> A no.1 coaching institute </span></div>




Output of the Program

Welcome to ITC Training classes A no.1 coaching institute

So in this way can add tooltip to our elements. And also you can set this tooltip to any position.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute