Tutorial Membuat Tooltip Dengan jQuery

Posted by : Irvan Kadhafi Wednesday, March 28, 2012

Kali ini IMC-Syndicate akan memposting Tutorial Membuat Tooltip Dengan jQuery
Berikut ScreenShot nya :

Klik gambar untuk memperbesar

Tooltip akan muncul apabila cursor mouse diarahkan ke link tersebut.

Berikut Tutorialnya

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='#fff', endColorstr='#f2f2f2');}

4. Copy kode dibawah ini dan letakkan diatas 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. 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

Irvan Kadhafi™ BackLinks !!

URL

Code For Forum

HTML Code

<a href='http://imc-syndicate.blogspot.com/2012/03/tutorial-membuat-tooltip-dengan-jquery.html' target='_blank'>Tutorial Membuat Tooltip Dengan jQuery</a>

Irvan Kadhafi™

Just For Sharing