Cara Membuat Tooltip Sederhana Secara Manual

Holla bray n sist, ketemu lagi bersama ayas di awal bulan juni ini. Mumpung masih semangat awal bulan, soalnya abis dapet kiriman jadi makin semangat. hahahaaa
Okedehh kali ini ayas mau share cara membuat tooltip di blog secara manual. Jadi, misalkan bray n sist pengen ngasih tooltip di blog, caranya masih manual dengan nambahin script di postingan yang akan dikasih tooltip.
Sebelumnya, apa yang dimaksud dengan tooltip itu?? Makna gampangnya, tooltip adalah kata bantu yang digunakan untuk mendeskripsikan suatu kata yang biasanya ditampilkan dalam suatu artikel di blog. Nah kalau masih belum mengerti, coba kalian klik halaman demo di bawah ini

View demo

Nah, script tooltip ini sendiri ayas dapet dari blog tetangga milik sam Dharla Ferdana di postingannya berjudul Cara Membuat Tooltip dengan jQuery. Namun sedikit ayas tambahi scriptnya.
Lanjut menuju cara memasang tooltipnya.

• Login ke akun blogger kamu
• Kemudian masuk ke pengaturan template seperti gambar di bawah ini

• Pilih edit HTML
• Kamudian carilah kode ]]></ b:skin>. Agar lebih mudah tekan Ctrl + F kemudian paste kode tersebut.
• Copy kode berikut kemudian tempelkan tepat di atas kode ]]></ b:skin>.

#easyTooltip {

cursor: help;

padding: 5px;

border: 1px solid #008000;

margin-left: 0; width: 250px;

text-align: left;

color: #00cc00;

background: #004000;

}

 a.tooltip {

/*--position: relative;--*/

/*--text-decoration: none;--*/

border-bottom: 1px dotted #000;

cursor: help;

}

• Lalu cari kode </head>.
• Copy kode di bawah ini, lalu tempelkan tepat di atas 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>

• Perhatikan kode berikut:

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

• Jika di template kalian sudah dilengkapi dengan kode javascript, maka hilangkan kode tersebut.
• Simpan dan lihat hasilnya pada postingan blog kalian.

Untuk memasang tooltip di postingan caranya adalah dengan meletakkan kode berikut

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

Nah, begitulah cara menampilkan tooltip di blog. Semoga bermanfaat. :)