Css

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>

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

Normal Image:

Tooltip Using Css

After mouse over:

Tooltip Using Css

How to Set Text Background Color Using CSS

The entire document code will appear like this:

<html>
<head>
<style type="text/css">
span.yellow
{
background-color:yellow
}
</style>
</head>
<body>
<p>
<span class="yellow">This is a text</span>
</p>
</body>
</html>

Before applying Css:

Text Background Color Using Css