<head>
<script src="jquery.tools.min.js"></script>
</head>
<style>
#download_now {
background:transparent url(http://jquerytools.org/media/img/downloadnow.png) no-repeat scroll 0 0;
display:block;
height:44px;
margin: 0 auto;
margin-bottom:30px;
overflow:hidden;
text-indent:-999em;
width:159px;
cursor:pointer;
}
#download_now:hover {
background-position:0 -44px;
}
#download_now:focus {
background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
display:none;
padding:10px;
font-size:18px;
color:#336699;
}
</style>
<script>
$(document).ready(function(){
$("#download_now").tooltip({ effect: 'slide'});
});
</script>
<br><br><br><br><br>
<!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
<div class="tooltip">
<div style="background-color:FFFCF0;margin-left:auto;margin-right:auto;padding:10px;border:4px solid green;">
This is the tool tip.
</div>
</div>