You must enable Javascript in your browser to run or open this site.

Membuat Bubble Tooltips Jquery

Lama rasanya saya tidak memposting artikel di blog ini. Okey begini, ada beberapa orang menanyai tentang bagaimana cara membuat link yang dituju kursor ada tulisannya? Nah, kali ini saya membahas itu. Yang dimaksud itu adalah Bubble Tooltips.


Menurut saya Bubble Tooltips adalah sebuah object yang menandai object lain dengan cara mengeluarkan sebuah tulisan lain yang bisa diartikan deskripsi dari sebuah object. Contoh coba arahkan kursor sobat disini, ARAHKAN! Sebenarnya asal mula script Bubble Tooltips adalah dari kode title="Description", cuman kali ini berbeda, karna ada tambahan kode selain kode title diatas dan bisa di edit sesuai kemauan, seperti warna, tulisan, ataupun background.
Bedakan dengan kode yang biasa yang tidak menggunakan tambahan script Bubble Tooltips, contoh mouse ARAHKAN! Nah, dipastikan sobat sudah mengenal Bubble Tootltips ini.

Jika tertarik dengan ini script memang panjang dan rumit, tetapi kalau menyimak pasti akan terlihat mudah. Berikut adalah tutorial dan sekalian berbagai contohnya.

• Pertama tama buka blogger.com dan login dengan pass dan id sobat :)

• Sekarang sobat memasuki dashboard dan klik rancangan atau design untuk edit html.
• Setelah itu, letakan kode berikut tepat diatas kode ]]></b:skin>
.tipsy { padding: 5px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url(http://i963.photobucket.com/albums/ae116/Farixquilicuor/FarixsanTipsy.png);}
.tipsy-inner { border:#000;padding: 7px 10px 7px 10px; background-color: #fff; color: #ff0000; max-width: 300px; text-align: center; font-weight:bold; }
.tipsy-inner { -moz-border-radius:5px; -webkit-border-radius:5px; }
.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: 5; left: 10px; }
Nah, setelah itu paste kode berikut dibawah kode <head> tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<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: 2.0});
} 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>
• Kemudian Save Template.

Dalam pengeluaran Bubble Tootltips dari sebuah object, perlu diperhatikan cara keluarnya dari sebelah mana.

DEMO TOOLTIPS!

Rumus : Up
class="south"
Rumus : Left
class="east"
Rumus : Right
class="west"
Rumus : Down
class="north"

Nah, bisa ditambahkan kode class="" (Tipsy) diatas di kode html sobat lainnya, baca disini http://farixsantips.blogspot.com/2010/10/memberi-berbagai-tag.html untuk memberi Tooltips lengkap di blog.

Nah, terimakasih untuk meluangkan waktu sobat untuk membaca artikel ini.

25 comments

  1. wow nice info sobat thanks for sharing to us

    BalasHapus
  2. mantap mas info nya makasih ya dah bersusah payah berbagi dengan kita

    BalasHapus
  3. muantaaap ilmunya nih bos :D
    thanks yaa..

    BalasHapus
  4. To All : Sama Sama kawanku, datang lagi kemari yaaa :)

    BalasHapus
  5. salam sob
    thanks sharenya
    akan dicoba nanti

    BalasHapus
  6. Wow semakin bagus nih tutorialnya :D

    BalasHapus
  7. To Kelpo : Makasih ya atas dukungannya :) datang lagi kawan!

    BalasHapus
  8. Thank sob...
    entar ane coba,,

    BalasHapus
  9. mantepp,.,udah saya coba dan berhasil sobat,.,.kren deh ni blog

    BalasHapus
  10. Thanks arif :) semoga bermanfaat yaaaa :) datang lagi lain waktu

    BalasHapus
  11. kalo nulis rumus pemangginya di artikel postingan,, mbuka yang COMPOSE ato di EDIT HTML??

    BalasHapus
  12. iya, waktu kita bikin artikel kan tersedia dua pilihan..pada window COMPOSE (langsung nulis, html tertulis secara otomatis) atau EDIT HTML (mesti nulis html secara manual)..
    naa, kalo mau bikin pemanggil (IN TEXT atau IN LINK)dari script ini pake yang COMPOSE atau yg EDIT HTML??

    BalasHapus
  13. Ohhhhh itu toh maksud kk :) Sebenarnya dua duanya bisa di COMPOSE, ketika menaruhkan benih kode menggunakan bubble tooltips ini (<a href='LINK' class='Tips-fade' title='Keterangan dari link'>Nama Link</a>)html pasti kode tersebut telah berubah menjadi hasil ketika klik EDIT HTML trus balik lagi COMPOSE. Nah, kalau menaruhkan benih kode html yang EDIT HTML akan berubah di COMPOSE. TETAPI kalau ingin melihat hasil bubble tolltips harus ketika selesai posting (bukan preview). :)

    BalasHapus
  14. Sukses tutorialnya,dah saya pakai http://musakhairulumam.blogspot.com/

    BalasHapus
  15. keren juga nih ....
    coba aaah ... :)

    BalasHapus
  16. To JiL - Judithya : Gak bisa dimananya :D lengkap dong sob pertanyaannya :D siaapa tau ada yang kelewat :D
    To Shinobi : Silahkan dicoba sob :D

    BalasHapus
  17. Kalau Disamping Ada Search Box Caranya dimana Kk Farix

    BalasHapus
  18. kok ga bisa ya gan , :((
    terus url ini " http://i963.photobucket.com/albums/ae116/Farixquilicuor/FarixsanTipsy.png "
    ga ada gambar nya ?

    BalasHapus
  19. To egi : kok gak bisa ya? perasaan normal normal aja tuh sob :-/ apa ada yang ketinggalan? :-/ kalo soal gambar itu emang putih, bukan gak ada.

    BalasHapus
  20. beneran deh gan ga bisa ? coba agan coba di blog yg laen . ikutin cara di atas ...

    oh iya ngmng2 cara bikin efek icon yg di sentuh sma cursor langsung naek ke atas , kyk yg di atas navbar ntu , kyk mna ya gan ? :)

    BalasHapus
  21. Kunjungan dan membaca tutorialnya sobat

    BalasHapus