Membuat Tooltips Dengan Jquery

Penggunaan Jquery memang sangat menarik sekali. banyak pilihan yang bisa dibuat dengan menggunakan Jquery, salah satunya adalah Tooltip. kali ini saya beri nama Membuat Tooltips Dengan Jquery. mari kita lihat caranya berikut :
untuk demonya bisa dilihat di Oblo.web.id.

Masuk ke blogger - Rancangan - Edit Html - Kemudian cari kode </head> letakkan kode berikut diatasnya :

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

Kemudian letakkan Javascript berikut dibwah  kode diatas tadi :

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

Lagkah selanjutnya memasukkan kode Css berikut diatas kode ]]></b:skin>



#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

Lalu untuk menggunakannya silahkan masukkan kode berikut disetiap link yang ingin diberi Tooltips :

contoh :


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

Sekian dulu Membuat Tooltips Dengan Jquery semoga bermanfaat.