Home Css
How to Create Tooltip Using CSS

Create Html file with following code

<html>
</head>
<body>
<div id="container">
<p>Today is<a href="#" class="toolTip">Double Seventh Festival
<span>The Chinese Valentine's Day</span></a></p>
</div>
</body>
</html>

Add the following code between <head> and </head>

<style type="text/css">
a:hover {
background:#ffffff;
text-decoration:none;
}

a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}

a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid pink;
color:blue;
}
</style>

When you mouse over the link it will give you following effect

Normal Image:

Tooltip Using Css

After mouse over:

Tooltip Using Css