.

Tutorial Membuat Tooltip Dengan jQuery

1. Login ke Blogger
2. Klik DesignàEdit HTML, centang  Expand This Widget
3. Cari kode ]]></skin> dan masukkan kode dibawah tepatdi atas kode tadi
#easyTooltip{padding-top:4px;padding-bottom:4px;padding-left:8px;padding-right:8px;font-size: 12px;font-family: Segoe UI, Arial;border-radius: 5px;border:1px solid #c4c4c4;color: #000;background: #ffffff;background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background: -moz-linear-gradient(top,  #fff,  #f2f2f2);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fff&#39;, endColorstr=&#39;#f2f2f2&#39;);}
4. Copy kode dibawah ini dan letakkan diatas 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. Save Template
6. Untuk memakainya silakan copy dibawah ini
<a class='tooltip' href='http://www.irvankadhafi.net/' title='Indonesian Master Cheaters'>Irvan Kadhafi</a>

Semoga Bermanfaat

ToolTip CSS by BIT-XP
Original Post by 4-Jie