Tips membuat Tooltip dengan Jquery

Tips membuat Tooltip dengan Jquery

Posted by rike on 0

Tooltip dengan jquery

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 Home yang ada diatas.



Ide ini saya ambil dari blog bookmarknya Choen..



Begini caranya Trik Membuat ToolTip di Blogger:



1. ToolTip ini menggunakan Jquery, untuk itu anda perlu memasang script berikut (jika memang belum anda miliki), diatas </head> :

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

2. Masukan javascript berikut, di dibawah script jquery diatas.

<!-- 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>

3. Selanjutnya masukkan code css, code css ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini).

#easyTooltip{

padding:5px 10px;

border:1px solid #EF6D21;

background: #181C18;

color:#E0EFE0;

}

4. Ini tahap terakhir untuk mengaktifkan fungsi Tooltips, yaitu masukan code berikut, disetiap link yang anda inginkan.



class='tooltip' title='isi sesuai yang anda inginkan'



contohnya penerapannya seperti berikut:

<a class="tooltip" href="http://draft.blogger.com/" title="Beranda">

Beranda

</a>

>> demikian keseluruhan tahapan tersebut, semoga berhasil.

UPDATE : Dikarenakan blognya Choen tidak lagi memasang tooltips, maka contoh penerapannya bisa kamu lihat pada blog Oblo.web.id kemudian kamu bisa sorot link-link yang ada pada blog tersebut.