Cara Membuat Tooltip dengan jQuery

Cara Membuat Tooltip dengan jQuery >>Sebelumnya share tentang Cara Membuat Tooltip dengan jQuery mungkin ada yang belum tahu apa itu tooltip,Cara Membuat Tooltip dengan jQuery akan memberi kesan cantik pada blog, karena link2 yang ada pada blog kamu akan muncul seperti title yang bisa sangat mudaj kamu atur, coba kamu arahkan mouse kamu pada blog ini, nahmitulah yang dinamakan tooltips.

cara membuat tooltip

Gambar diatas menunjukkan adanya tooltips yang muncul saat pointer diarahkan ke link, lalu bagaimana cara membuat tooltip di blogger, ikuti tutorial blog singkat dibawah ini:

1. Login ke blogger kamu
2. Silahkan menuju pengaturan template
3. cadangkan dulu dengan mendownload template kamu untuk berjaga2 jika terjadi kesalahan dapat dengan mudah di pulihkan.
4. Cari kode ]]></ b:skin> dan letakkan kode berikut tepat diatas kode ]]></ b:skin>
   

   #easyTooltip {
   padding: 5px;
   border: 1px solid #008000;
   color: #00cc00;
   background: #004000;
   }

5. Selanjutnya copy kode di bawah ini, dan letakkan di atas kode </ head> dan letakkan kode 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>

6. perhatikan kode di bawah ini, jika dalam template anda sudah terdapat kode tersebut maka tidak perlu diikut sertakan.
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

7.  Simpan template kamu

Sekarang pada template blog kamu sudah dilengkapi dengan tooltip, untuk memanggil fungsi tooltips ihat kode dibawah ini:

<a class='tooltip' href='url link' title='pesan tooltip'>text link</a>

Nah, tambahkan yang berwarna merah tersebut pada link kamu, demikian Cara Membuat Tooltip dengan jQuery, semoga bisa membantu kamu.