Tips membuat Tooltip dengan Jquery

<figure><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVumAP_LwvDobSUmKBnLdf0X1W5LD7XAwckzhyphenhyphen-7EWI0_aoKMt9-mp69a8HE68V3d5-_ZHjGbpsROivxLV_NsZlu-dXXBl4ZlPyx48PC_Kpj9hnrLSp3BkWbKNxlIcBO1vnjDaoNBq4E/s1600/tooltip.gif" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVumAP_LwvDobSUmKBnLdf0X1W5LD7XAwckzhyphenhyphen-7EWI0_aoKMt9-mp69a8HE68V3d5-_ZHjGbpsROivxLV_NsZlu-dXXBl4ZlPyx48PC_Kpj9hnrLSp3BkWbKNxlIcBO1vnjDaoNBq4E/s400/tooltip.gif" width="400" /></a><figcaption>Tooltip dengan jquery</figcaption></figure><br />Maksud dari tooltip itu ialah sejenis title pada link yang kita sorot baik berupa banner atau link biasa. contoh di blog ini bisa anda sorot tombol <b>Home</b> yang ada diatas.<br /><br /><a name='more'></a><br /><br />Ide ini saya ambil dari blog bookmarknya <a href="http://deconstructioncode.blogspot.com/"><b>Choen</b></a>..<br /><br /><br /><br /><b>Begini caranya Trik Membuat ToolTip di Blogger:</b><br /><br /><br /><br />1. ToolTip ini menggunakan <b>Jquery</b>, untuk itu anda perlu memasang script berikut (jika memang belum anda miliki), diatas </head> :<br /><br /><br /><br /><blockquote><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></blockquote>2. Masukan <b>javascript</b> berikut, di dibawah script jquery diatas.<br /><br /><br /><br /><blockquote><!-- begin Tooltips --><br /><br /><script type='text/javascript'><br /><br />$(document).ready(function(){<br /><br />$("a.tooltip").easyTooltip();<br /><br />});<br /><br /><br /><br /></script><br /><br /><script type="text/javascript"><br /><br />//<![CDATA[<br /><br />(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+"'><br /><br /><br /><br />"+content+"</div><br /><br />");$("#"+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);<br /><br />//]]><br /><br /><br /><br /></script></blockquote><br /><br />3. Selanjutnya masukkan <b>code css</b>, code css ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini).<br /><br /><br /><br /><br /><br /><blockquote>#easyTooltip{<br /><br />padding:5px 10px;<br /><br />border:1px solid #EF6D21;<br /><br />background: #181C18;<br /><br />color:#E0EFE0;<br /><br />}</blockquote><br /><br />4. Ini tahap terakhir untuk mengaktifkan fungsi <b>Tooltips</b>, yaitu masukan code berikut, disetiap link yang anda inginkan.<br /><br /><br /><br />class='tooltip' title='isi sesuai yang anda inginkan'<br /><br /><br /><br />contohnya penerapannya seperti berikut:<br /><br /><br /><br /><blockquote><a class="tooltip" href="http://draft.blogger.com/" title="Beranda"><br /><br />Beranda<br /><br /></a></blockquote>>> demikian keseluruhan tahapan tersebut, semoga berhasil.<br /><br /><br /><br /><p>UPDATE : Dikarenakan blognya <b>Choen</b> tidak lagi memasang tooltips, maka contoh penerapannya bisa kamu lihat pada blog <a href="http://www.oblo.web.id/"><b>Oblo.web.id</b></a> kemudian kamu bisa sorot link-link yang ada pada blog tersebut.</p>

Posted by Hii Sekai