CSS Tooltips

Pop-up here is the popup message tooltips can be produced with some simple CSS. This is illustrated by the tooltips below which have a grey background. Put your cursor over the grey area to see the tooltip.

First of all define a subset of the a tag a.info
{
position: relative; /*this is the key*/
z-index: 24;
background-color: #ccc;
color: navy;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
padding: 2px;
} . You can have any format you like as long as you make the position relative so that it is measured from the top left corner of the calling text. In this case "a subset of the a tag".
Then set the hover for this subset so that when the cursor is placed over its background changes colour a.info:hover
{
z-index: 25;
background-color: white;
}
.
Now set a span a.info span
{
display: none
}
within this subset and switch off it's display.
Finally set the hover within the span a.info:hover span
{
/*the span will display just on :hover state*/
font-family: Comic Sans MS;
display: block;
position: absolute;
top: 20px;
left: 5px;
width: 20em;
border: 1px solid blue;
background-color: white;
color: navy;
text-align: center;
font-weight: normal;
text-align: left;
padding: 4px;
z-index: 30;
} to give the message. You can format it anyway you like.

To make the CSS work you need some code within the page. Here is the code for the first popup <a class=info href="#"> Pop-up
<span>here is the popup message </span> </a>.

You can see all the code by using view source.

The original idea came from psacake.com