5 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='4-jie.blogpsot.com' title='Tutorial Blogspot Plus Templates'>Tutorial Blogger Lengkap </a>

Mohon untuk tidak melakukan tindakan SPAM, dan untuk tidak meninggalkan link hidup/link mati blog kamu dikomentar. Saya akan berikan komentar saya jika kamu juga dapat menghargai blog saya dengan tidak meninggalkan LINK dalam bentuk apapun !

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari 4JIE BLOG di inbox anda: