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



32 komentar:

  1. makasih mas
    sayangnya tooltip kek gini kerja kalau load udah selesai :(

    BalasHapus
  2. trik tooltips facebook yang kerennn..

    BalasHapus
  3. wah nice info mas.. bisa dicoba

    BalasHapus
  4. @Mas Doyok: ga gitu juga mas, klo jsnya dah keload, efeknya bisa jalan ko

    @fathi & denadan: makasih sob

    @secangkir teh: silakan klik menu profil di header sob, penerapan dari tooltips ini

    @liza: makasih, selamat mencoba...

    BalasHapus
  5. mantap nih saya coba dulu ahh

    follow aku ya aku udah nih

    BalasHapus
  6. thanks sobat atas info yang bernilai tinggi ini
    succes 4 U

    BalasHapus
  7. wah tampilannya tambah keren
    makasih bro

    BalasHapus
  8. datang lagi kesini...oh, jadi kaya menu dipesbuk itu ya..?

    BalasHapus
  9. Tutor yang bagus sob, kalo di terapkan pada theme Wordpress bisa gak Sob. makasih....

    BalasHapus
  10. wah keren :o ijin co-pas ya sob..bagus juga ne bwt koleksi gw..!!! hehehe

    BalasHapus
  11. Oh ini ya mas? makasih dah mampir dan lam kenal juga...

    BalasHapus
  12. gmana cari ganti background tooltips'a mas?
    kan background awal'a warna putih..
    kalo mau gnti jd warna biru gmana?

    BalasHapus
  13. meletakkan kode CSS nya di mana mas?

    BalasHapus
  14. @taufik: klo ganti warna coba utak-atik kode warnanya sob

    CSSnya dipasang di deretan kode CSS sob, biasanya di atas ]]></b:skin>

    BalasHapus
  15. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  16. brooo kok tak sama kaya facebook ??? coba deh di liat di http://www.bamsboenk.blogspot.com maklum newbie

    BalasHapus
  17. @And_i.Mr: maksudnya gimana sob? saya baru ke TKP tapi ga ada tooltipsnya :?

    BalasHapus
  18. bagaimana cara membuat agar text di tooltips nya bisa di enter kebawah, atau membuat list text

    thanks

    BalasHapus
  19. iendeera
    Untuk tipsy hanya mengambil "title" sepertinya. Coba mampir ke sini sob..

    BalasHapus
  20. Assalamu'alaykum...
    Mas...
    kenapa yha kalo saya coba pake tooltips ini gak pernah berhasil? :(( padahal saya sudah melakukannya sesuai prosedur. tapi saat saya menggunakan tooltips di

    http://www.davindas.com/2010/05/trik-membuat-tooltip-ini-menggunakan.html

    saya berhasil, dan tooltipsnya bekerja dengan baik.
    tolong liatin donk mas knp bisa begitu..
    soalnya saya pengen bgt pake tooltips yg ini.:o

    BalasHapus
  21. taufikdisc™
    Sebelumnya ada masalah pada js-nya sob, sekarang sudah diperbarui, silakan dicoba kembali, semoga berhasil
    :)

    BalasHapus
  22. tetap gak bisa mas... :(

    BalasHapus
  23. Sorry mas...
    dah bisa rupanya... :))
    makasi byk yha mas...
    senangnya hatiku.. ;;)
    makasi jg dah blg keren mas..
    tapi mas, :( saya pengen ilangin bacaan page 1 of 12 sama widget by abu farhan?
    gimana mas?

    BalasHapus
  24. Sip, sama-sama, untuk ngilangin 1 of 12 dsb, cari kode ini:

    .showpageOf {
    margin:0 8px 0 0;
    }

    lalu ganti dengan ini:

    .showpageOf {
    display:none;
    }

    untuk widget by abu farhan, silakan minta izin sama yang bersangkutan
    :)

    BalasHapus
  25. Waduh...
    makasi lg yha mas..:)

    BalasHapus
  26. keren2.... cobi ah...

    BalasHapus
  27. mas... tipsynya ke atas gimana (keluarnya bukan dibawah link) tapi diatasnya...

    BalasHapus
  28. Saya lihat di blogmu sudah bisa tuh sob :)

    BalasHapus
  29. klo pakek tooltip yang ini kok bisa malah ya?? yg postingan baru malah gbs bang.

    btw, thanks for sharenya ya. hehe

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑