Untitled

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#test {
        display:block;
        width:974px;
        height:731px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:18px;
        background:none;
        margin-left:300px;
        text-decoration:none;
	}


.tooltip {
	display:none;
	background:transparent url(bg_tooltip.png); background-repeat:no-repeat;
	height:37px;
	width:166px;
	padding:3px 0 0 5px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
	position:absolute;
}


</style>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('a[rel=tooltipp]').tooltip();
    $('a').mousemove(function(e) {
    var x_offset = 15;
    var y_offset = 18;
    $('.tooltip').css('left', e.pageX + x_offset).css('top', e.pageY + y_offset);
});

});
</script>

</head>

<div id="demo">

    <a rel="tooltipp" Id="test" href="http://www.google.nl" title="Shop the end of season sale"></a>

</body>
</html>