Tipsy: Tooltips ala Facebook

Tipsy2Setelah sekian lama tertunda, akhirnya kali ini saya sempatkan untuk menulis tentang “Trik membuat tooltips ala Facebook menggunakan Tipsy JQuery Pluggin” (yang sebelumnya telah dipesan oleh beberapa sobat blogger ;) 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.4/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: true, 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: 0.8});
} 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});
$('.north-west').tipsy({gravity: 'nw'});
$('#north-west').tipsy({gravity: 'nw'});


});
//]]>
</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=80); background-repeat: no-repeat; background-image: url(http://lh4.ggpht.com/_BiYlG6sktcY/S1aDroqf34I/AAAAAAAAAns/EVhuNYt9xAk/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: #000000; color: #ffffff; max-width: 200px; text-align: center; }
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }
.tipsy-north-west { background-position: top: 0; left: 10px; }

 

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

hover over me

 

Untuk opsi-opsi lainnya, silakan kunjungi tautan ini

Selamat mencoba, semoga berhasil :)


diperbarui 25 Juli 2010



Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑