Cara membuat Tooltip

Tooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah halaman web atau blog yang akan dituju sebelum link tersebut di klik. Tooltip ini muncul ketika pointer mouse diarahkan diatas sebuah link teks atau link image. Jadi dengan adanya tooltip ini pengunjung akan tahu pentingnya isi sebuah artikel atau halaman web yang diarahkan lewat link yang menggunakan tooltip tersebut. Sebagai contoh, silahkan arahkan pointer mouse anda diatas link dibawah ini :

Cara buat web

Cara buat web

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
 1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<!-- 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 --> <style type="text/css">#easyTooltip{ padding:5px 10px; border:2px solid #BDBDBD; border-top-width:10px; border-bottom-width:10px; background: #FFFFFF; color:#6E6E6E;} </style>

6. Simpan Template.

Langkah selanjutnya memasang tooltip pada sebuah link :
1. Bila anda akan memasang tooltip pada LINK TEKS. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a>

 2. Bila anda akan memasang tooltip pada LINK IMAGE. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank"><img src="ULR IMAGE" width="100px" height="100px"></a>

Nah...., mudah kan....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.