Hi there htmlmaniac14,
try this working example, it may suit your needs. :)
<!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="application/xhtml+xml; 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: 400px;
background-color:#fff;
border:4px double #006;
margin:185px auto;
}
.container {
width:360px;
height:156px;
margin:20px auto;
}
a.info {
display:block;
position:relative; /*this is the key*/
z-index:0;
width:100px;
height:100px;
color:#666;
font-style:oblique;
text-decoration:none;
float:left;
margin:5px;
}
a.info:hover{
z-index:1;
background-color:#fff;
}
#pic0 {
background-image:url(anim3.gif);
background-repeat:no-repeat;
border:3px double #060;
}
#pic1 {
background-image:url(anim1.gif);
background-repeat:no-repeat;
border:3px double #006;
}
#pic2 {
background-image:url(anim2.gif);
background-repeat:no-repeat;
border:3px double #606;
}
a.info .tooltip {
display: none;
}
a.info:hover .tooltip {
display:block;
position:absolute;
top:108px;
left:-6px;
width:100px;
border:3px double #0cf;
background-color:#cff;
color:#099;
font-size:9px;
font-style:normal;
padding:4px;
}
/*//]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<a href="http://www.htmlforums.com/showthread.php?t=60770" class="info" id="pic0">
<span class="tooltip">this link will take you to htmlforums.</span>
</a>
<a href="http://www.google.com" class="info" id="pic1">
<span class="tooltip">this link will take you to google.</span>
</a>
<a href="http://www.w3schools.com" class="info" id="pic2">
<span class="tooltip">this link will take you to w3schools.</span>
</a>
</div>
</div>
</body>
</html>