Membuat Tooltip Blogger Dengan jQuery

Bismillah ... Membuat tooltip blogger dengan jQuery adalah membuat pesan dari sebuah tulisan ataupun link dengan menampilkan sebuah keterangan dari tulisan atau link itu. Sebelumnya pun saya telah menjelaskan beberapa cara membuat balloon tooltip ini, diantaranya:

1. Membuat balloon tooltip untuk setiap link pada blog
2. Membuat balloon tooltip pada link blog
3. Membuat balloon tooltip dengan CSS3

Nah ... untuk topik ini tooltipnya menggunakan script yang lumayan agak panjang. Untuk contoh gambar kalian bisa melihat pada gambar dibawah ini:

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :



untuk membuat tooltip ini silahkan ikuti langkah-langkah pembuatannya di bawah ini:

1. Login ke blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>

#easyTooltip{

padding:5px;

border:1px solid #000;

color: #fff;

background:#000;

}

Keterangan

• Padding:5px : Jarak tootltip, bisa dirubah jika kalian mau
• border: 1px solid #000 ---> Garis pada tooltip dengan ketebalan 1 px jenis solid dan warna Hitam (#000), kalian bisa merubah warna ketebalan dan jenis garisnya.
• Color: #fff ---> Warna huruf atau tulisan berwarna putih
• Background:#000 ---> Warna latar berlakang atau background tooltipnya
• Untuk kode HTML warna silahkan KLIK DISINI, Untuk jenis garis Silahkan baca artikelnya DISINI

5. Sekarang simpan script berikut diatas kode </head>

<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(){
$(&quot;a.tooltip&quot;).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>

catatan
perhatikan kode berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Jika kode tersebut sudah ada pada template kalian maka abaikan saja alias tidak usah dipakai.

6. Simpan Template kalian

Untuk menggunakannya silahkan kalian gunakan kode berikut:

<a class='tooltip' href="LINK URL"title='PESAN DALAM TOOLTIP'>TULISAN KALIAN</a>

Selesai dan semoga bermanfaat...

Resensi :
CSS Globe | http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery