Membuat Tooltip dengan jQuery

Radith

jQuery

Jumat, 01 Desember 2017

9 Komentar | Tambah Komentar

Tooltip merupakan sebuah gelembung informasi tambahan yang muncul saat mouse melewati sebuah link/objek. Nah jika Anda ingin menambah tooltip atraktif yang mengikuti kursor pada blog Anda silahkan ikuti langkah berikut :

1. Pasang jQuery pada blog Anda (abaikan jika sudah ada jQuery)

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

2. Buka editor template lalu copy kode dibawah dan paste diatas tag </head>

<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,southId:"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!=""&amp;&amp;content!=undefined){$("body").append("&lt;div id='"+options.southId+"'&gt;"+content+"&lt;/div&gt;");$("#"+options.southId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.southId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.southId).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);
$(function(){$("a,abbr").easyTooltip();});
//]]>
</script>

3. Langkah selanjutnya adalah menambah CSS pada tooltip. Copy CSS dibawah lalu paste di tag <b:skin>

#easyTooltip {
padding:4px 8px;
font-size:13px;
font-family:inherit;
font-weight:normal;
border:1px solid #95a5a6;
border-radius:3px;
color:#000;
background:#fff;
z-index:9999;
max-width:300px;
}

4. Simpan template. Untuk menampilkan tootip, Anda tinggal menambah attribut title pada tag anchor (link), contoh :

<a href="" title="Contoh Tooltip!">Hover Saya</a>

Hover Saya