Cara Membuat Tooltip Dengan jQuery

 

Cara Membuat Tooltip Dengan jQuery - Kali ini saya membahas sebuah tutorial blogger yaitu Cara Membuat Tooltip Dengan Jquery. Tooltip adalah semacam icon yang memberikan keterangan pada link/gambar pada saat mouse kita arahakan ke link/gambar tersebut . Pasti sobat masih pada binggun semua ya??? Jadi ginii.. saat kita menggerakan mouse kearah link/gambar tersebut , dan link/gambar tersebut akan mengeluarkan keterangan yang singkat . Baik sudah mengerti kan ? Bagi yang sudah mengerti langsung aja liat tutorialnya di bawah ini .

1. Login Blogger

2. Cari Code </body> dan pastekan kode dibawag ini tepat diatas code </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(){
$(&quot;a.tooltip&quot;).easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:25,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 -->

3.Cari code ]]></b:skin>  lalu pastekan code dibawah ini tepat diatas kode ]]></b:skin>

#easyTooltip{
 padding:5px;
 border:1px solid #222222;
 background:#000000;
 font-size: 12px;
 color: #ffffff;
 }

4.Klik Save Template

Apakah sudah selesai ? tentu belum . Untuk menggunakan tooltipnya mudah tinggal copy code dibawah ini di Postingan pada Mode HTML bukan yang Compose

 

 <a class='tooltip' href='LINK PUNYA KAMU'  title='JUDUL TOOL TIP'>JUDUL LINK</a>