Compliments of coothead;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
<style type="text/css">
/*<![CDATA[*/
body {
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
background-color:#eef;
}
#wrapper {
width: 488px;
height:298px;
background-color:#fff;
border:6px double #006;
margin:185px auto;
}
.container {
height:30px;
width:400px;
margin: 20px auto;
}
a.info {
position:relative; /*this is the key*/
z-index:0;
color:#666;
font-style:oblique;
text-decoration:none;
display:block;
float:left;
}
.spanny {
float:left;
}
a.info .ttip {
display: none;
float:left;
}
a.info:hover{
z-index:1;
background-color:#fff;
}
a.info:hover .ttip {
display:block;
position:absolute;
top:20px;
left:40px;
width:120px;
border:3px double #0cf;
background-color:#cff;
color:#099;
font-size:10px;
font-style:normal;
padding:5px;
}
#pic {
background-image:url(anim3.gif);
border:3px solid #060;
width:100px;
height:100px;
}
a.info:hover #pictip {
top:20px;
left:-280px;
width:240px;
border:3px double #fc0;
background-color:#ffc;
color:#990;
font-size:12px;
text-align:justify;
padding:10px;
}
/*//]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<span class="spanny">This </span>
<a href="#" class="info">word
<span class="ttip">
This is the customised tool-tip. It's main advantage over the 'title' attribute
is that it remains in view whilst the hover state is maintained, thereby
allowing for a large amount of information to be imparted to the reader
</span>
</a>
<span class="spanny"> will produce the tool-tip.</span>
</div>
<div class="container">
<span class="spanny">This </span>
<a href="#" class="info" id="pic">
<span class="ttip" id="pictip">
This is the customised tool-tip. It's main advantage over the 'title' attribute
is that it remains in view whilst the hover state is maintained, thereby
allowing for a large amount of information to be imparted to the reader. As you
can see it is also easily customizable.
</span>
</a>
<span class="spanny"> can also produce the tool-tip.</span>
</div>
</div>
</body>
</html>