×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

CSS3

Introduction to CSS

Component of 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>

<html>

<style>

.tooltip {

      position: relative;

      color:black;

}

.tooltip .tooltiptext {

      visibility: hidden;

      width: 120px;

      background-color: red;

      color: #000;

      text-align: center;

      position: absolute;

      z-index: 1;

      }

.tooltip:hover .tooltiptext {

      visibility: visible;

}

</style>

<body>

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

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

</div>

</body>

</html>


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