Cara Membuat Tooltips Dengan Jquery

Cara Membuat Tooltips Dengan Jquery - Postingan kali ini 4jie blog akan share tutorial Cara Membuat Tooltips Dengan Jquery. Tooltips bisa dikatakan sebagai balon deskripsi yang pada sebuah link. Dengan menggunakan tooltips, link sebuah blog akan terlihat lebih hidup dan elegant. Mau tau bagaimana bentuk dan efek yang dikeluarkan dari Tooltips ini ?
Arahkan cursor pada menu navigasi horizontal atau bisa melihat gambar dibawah ini:

( klik gambar untuk memperbesar )

Cara Membuat Tooltips dengan Jquery
1. Login ke dashboard blogger
2. Klik Design --> Edit HTML, Klik centang pada tulisan Expand This Widget
3. Cari Kode ]]></skin> dan masukkan kode berikut tepat diatasnya

#easyTooltip{
padding:5px;
border:1px solid #ccc;
background:#f1f1f1;
}

4. Salin kode dibawah ini sebelum kode </body>

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<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("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+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 --> 

5. Simpan

Notes !
Untuk dapat mengaktifkan fitur tooltips ini, silahkan salin atau buat kode seperti disamping --> <a class='tooltip' href='deejayhan.blogspot.com' title='Tutorial Blogspot Plus Templates'>Tutorial Blogger Lengkap </a>