Code snippet page

<!-- JavaScript|CSS:Core code library snippet 3. -->
<!-- Custom tooltip using just pure CSS.
Adapting the characteristics of the anchor <a> element to 
create a cool tooltip positioned relative to the anchor. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<style type="text/css">
/* Tooltip styles */
.tipDiv a {
	border-bottom:1px dotted #000;
	text-decoration:none;
}
.tipDiv a:hover {
	position:relative;
	cursor:help;
}
.tipDiv a span {
	display:none;
}
.tipDiv a:hover span {
	display:block;
   	position:absolute;
	top:15px;
	left:15px;
   	padding:5px;
	margin:5px;
	background: #FFFF99;
	border:1px dotted #000;
	z-index:2;
}
</style>
</head>

<body>
<!-- Proof that all your hyperlinks are styled as tooltips -->
<a href="#">Standard site link outside the custom tooltip style.</a>

<!-- Division containing the anchor styled as a tooltip -->
<!-- Tooltip content is contained in the <span> element. -->
<div class="tipDiv">         
<p>Example of a link custom styled as a tooltip: the 
<a href="#">Internet<span><img src="comment.gif" />A global system of interconnected computer networks.</span></a>.</p>
</div>

</body>
</html>