Cara membuat Tooltip

Tooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah halaman web atau blog yang akan dituju sebelum link tersebut di klik. Tooltip ini muncul ketika pointer mouse diarahkan diatas sebuah link teks atau link image. Jadi dengan adanya tooltip ini pengunjung akan tahu pentingnya isi sebuah artikel atau halaman web yang diarahkan lewat link yang menggunakan tooltip tersebut. Sebagai contoh, silahkan arahkan pointer mouse anda diatas link dibawah ini :

Cara buat web

Cara buat web

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
 1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<!-- 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> <!-- end tooltips --> <style type="text/css"> #easyTooltip{ padding:5px 10px; border:2px solid #BDBDBD; border-top-width:10px; border-bottom-width:10px; background: #FFFFFF; color:#6E6E6E;} </style>

6. Simpan Template.

Langkah selanjutnya memasang tooltip pada sebuah link :
1. Bila anda akan memasang tooltip pada LINK TEKS. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a>

 2. Bila anda akan memasang tooltip pada LINK IMAGE. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank"><img src="ULR IMAGE" width="100px" height="100px"></a>

Nah...., mudah kan....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Judul: Cara membuat Tooltip; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• CSS Border-RadiusFungsi Properti css border - radius memudahkan kita merubah sudut pada sebuah box atau kotak menjadi tumpul atau melengkung. Bahkan dengan properti css border - rad ... readmore
• Modifikasi Thread Comments blogger dengan CSS Bismillah, menlanjutkan postingan yang sbelumnya yang membahas tentang caa Mengganti Avatar Anonim Pada Komentar dengan jQuery, kali ini saya akan membahas tent ... readmore
• CSS3 GeneratorSebelum memasuki pembahasan tentang CSS3 Generator, saya akan menjelaskan tentang Apa itu CSS3? mungkin dari kalian ada yang belum mengetahuinya menurut info yang s ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• CSS TeksBeberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi tek ... readmore