“Trik membuat tooltips ala Facebook menggunakan Tipsy JQuery Pluggin” Pertama kali saya melihat penerapan tooltips ini di blog Anime7 (trims inspirasinya :) penasaran dengan si TIPSY? silakan arahkan tetikus (mouse) Anda pada menu horizontal di header halaman ini (menarik?) Bagaimana cara menerapkan TIPSY di template Blogger? silakan baca lanjutan tulisan ini.
1. Tooltips ini menggunkan JQuery, oleh karena itu (bila belum ada) tempatkan kode JQueri ini di atas </body>
<!-- jQuery --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
2. Tempatkan kode berikut ini di bawah kode JQuery di atas
<!-- Tipsy --><script type='text/javascript'> //<![CDATA[ (function($) { $.fn.tipsy = function(opts) { opts = $.extend({fade: false, gravity: 'n'}, opts || {}); var tip = null, cancelHide = false; this.hover(function() { $.data(this, 'cancel.tipsy', true); var tip = $.data(this, 'active.tipsy'); if (!tip) { tip = $('<div class="tipsy"><div class="tipsy-inner">' + $(this).attr('title') + '</div></div>'); tip.css({position: 'absolute', zIndex: 100000}); $(this).attr('title', ''); $.data(this, 'active.tipsy', tip); } var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; switch (opts.gravity.charAt(0)) { case 'n': tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north'); break; case 's': tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south'); break; case 'e': tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east'); break; case 'w': tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west'); break; } if (opts.fade) { tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 1}); } else { tip.css({visibility: 'visible'}); } }, function() { $.data(this, 'cancel.tipsy', false); var self = this; setTimeout(function() { if ($.data(this, 'cancel.tipsy')) return; var tip = $.data(self, 'active.tipsy'); if (opts.fade) { tip.stop().fadeOut(function() { $(this).remove(); }); } else { tip.remove(); } }, 100); }); }; })(jQuery); //]]> </script> <script type='text/javascript'> //<![CDATA[ $(function() { $('.north').tipsy({gravity: 'n'}); $('#north').tipsy({gravity: 'n'}); $('.south').tipsy({gravity: 's'}); $('#south').tipsy({gravity: 's'}); $('.east').tipsy({gravity: 'e'}); $('#east').tipsy({gravity: 'e'}); $('.west').tipsy({gravity: 'w'}); $('#west').tipsy({gravity: 'w'}); $('.tips-fade').tipsy({fade: true}); $('#tips-fade').tipsy({fade: true}); }); //]]> </script>
<!-- end Tipsy -->
3. Selanjutnya, pasang kode CSS ini, silakan dimodifikasi sesuai selera
/* Tipsy */.tipsy { padding: 5px; font-size: 11px; font-weight:bold; opacity: 0.8; filter: alpha(opacity=90); background-repeat: no-repeat; } .tipsy-inner { padding: 4px 5px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-north { background-image: url(http://lh4.ggpht.com/_BiYlG6sktcY/SwDvSMx7bAI/AAAAAAAAAag/WIckbzP3EVE/tipsy-north.gif); background-position: top center; } .tipsy-south { background-image: url(http://lh3.ggpht.com/_BiYlG6sktcY/SwDvSevh4NI/AAAAAAAAAak/rJ8MeGx_b0s/tipsy-south.gif); background-position: bottom center; } .tipsy-east { background-image: url(http://lh3.ggpht.com/_BiYlG6sktcY/SwDvSFzW97I/AAAAAAAAAac/E7MC54bzbHU/tipsy-east.gif); background-position: right center; } .tipsy-west { background-image: url(http://lh6.ggpht.com/_BiYlG6sktcY/SwDvSWpEjRI/AAAAAAAAAao/VIqa6acxH_o/tipsy-west.gif); background-position: left center; }
4. Langkah terakhir adalah mengaktifkan fungsi TIPSY pada link-link yang Anda inginkan
class='tips-fade' title='isi sesuai keinginan Anda'
Contoh:
<a class='tips-fade' href='#' title='bagus kan? :D'> hover over me </a>
Hasilnya seperti ini
Untuk opsi-opsi lainnya, silakan kunjungi tautan ini
Selamat mencoba, semoga berhasil :)
