Cara Membuat Tooltip Sederhana dengan Menggunakan Javascript

Untuk DEMO bisa diliat di bawah ini:
Yang ini pada tulisan

Blog ini bernama Fansublogger

Yang ini Contoh Tooltip Sederhana Pemasangan pada gambar



Pertama kalian kopikan CSS ini

#tooltip {
position:absolute;
background:#ED4E6E;
padding:6px 8px;color:#fff;
display:none;
font-size:11px;
font-weight:bold;
}

Sekarang kopikan javascript di bawah ini

<script>
//<![CDATA[
this.tooltip=function(){xOffset=10;yOffset=20;$("a.tooltip,img.tooltip,p.tooltip").hover(function(e){this.t=this.title;this.title="";$("body").append("<p id='tooltip'>"+this.t+"</p>");$("#tooltip").css("top",e.pageY-xOffset+"px").css("left",e.pageX+yOffset+"px").fadeIn("fast")},function(){this.title=this.t;$("#tooltip").remove()});$("a.tooltip,img.tooltip,p.tooltip").mousemove(function(e){$("#tooltip").css("top",e.pageY-xOffset+"px").css("left",e.pageX+yOffset+"px")})};$(document).ready(function(){tooltip()})
//]]>
</script>

Jika sudah, sekarang tinggal cara pemasangannya
Anda bisa melihat di bawah sini

<a class="tooltip" href="http://fansublogger.blogspot.com" title="Blogger Tutorial">Blog Hilman Fadillah</a>
<p class="tooltip" title="Ini adalah contoh tooltip pada tag p">Contoh tooltip pada tag p</p>
<img class="tooltip" title="Tooltip on image" src="image.png"/>

Terimakasih semoga bermanfaat!