Cara Membuat Tooltip Sederhana

Baru ajah salah satu sobat saya bertanya gmn tuh cara buat tooltip seperti saya . Kebingungan juga nih gimana caranya saya jawab, akhirnya kepikiran untuk posting ajah deh biar gampang hehehe .

Sebenernya nih trik udah cukup lama yah, tapi yg nama nya belajar kan gag kenal waktu, ap salahnya kalo saya posting sekarang .

Udah tau kan apa itu tooltip ? Yoi, Kotak keterangan waktu mouse nyorot sebuah link ato gambar gitu . Nah tooltip yg akan saya share dsni yaitu tooltip yg saya gunakan sekarang ini, Kotak keterangn yg muncul dari tooltip ini adalah keterangn title dari sebuah link dan alamat link . Untuk contohnya sorot ajah beberapa link saya .

Langsung ajah cara buatnya . gampang kok .

1. Masukan css berikut sob .
/* Fading Tooltips By Frank Bueltge*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#FFFFFF;
border:2px solid #000000;
text-align:left;
padding:5px;
min-height:1em;
}

body div#toolTip p {
margin:0;
padding:0;
color:#000000;
font:13px verdana,arial,sans-serif;
font-weight:bold;
}

body div#toolTip p em {
display:block;
margin-top:3px;
color:#000000;
font-size:11px;
font-style:normal;
font-weight:normal;
}

body div#toolTip p em span {
font-weight:bold;
color:#000000;
}
NB: Bisa di edit2 sendiri sesuai template temen2 .

2. Lalu masukan script berikut, dibawah ]]></b:skin>
<:script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

NB: Kalo udah punya sebaiknya gag usah biar gag dobel .

3. Masukan script dibawah ini juga dibawah script diatas
<SCRIPT src='http://h1.ripway.com/fabi0/AddEvent.js' type='text/javascript'/>
<SCRIPT src='http://h1.ripway.com/fabi0/title.js' type='text/javascript'/>

NB: Untuk tulisan berwarna merah sebaiknya dihostingkan sendiri ke hostingan favorit sobat yg sekiranya lebih cepat . Tapi kalo mau yg instan pake ajah .

4. Dan yg terakhir masukan javascript ini dibawah script diatas .
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("

"+content+"

");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->


Nah mudah kan ? silahkan dicoba, biasanya tooltip muncul setelah load page selesai . jadi jangan merasa gagal dulu sebelum load page selesai .