Cara Membuat Tooltips Dengan Jquery

Home » Tutorial Blogspot » Cara Membuat Tooltips Dengan Jquery

Cara Membuat Tooltips Dengan Jquery

Posted by Mas Radith 0 comments

Cara Membuat Tooltips Dengan Jquery - Postingan kali ini KliniKomputer 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>

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


<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>

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>

0 komentar:

Posting Komentar

Please write your comments here.Thanks.

KliniKomputer