Tooltip - jQuery Bubble Info

Bubble Info atau Tooltip atau Bubble Help adalah sebuah elemen umum antar muka pengguna grafis yang akan menampilkan suatu informasi dari suatu item pada halaman website ketika seorang pengunjung mengarahkan (hover) pointer mouse atau meng-klik item tersebut^[1]. Item pada halaman website yang bisa diberikan elemen tooltips biasanya berupa hyperlink, tooltips ini akan bekerja memberikan suatu informasi jika pengunjung tersebut mengarahkan mouse pointernya atau meng-klik hyperlink yang ada pada suatu halaman website.

Ini biasanya digunakan untuk memperjelas suatu hyperlink yang akan dituju atau hanya sekedar memberikan informasi tambahan dari suatu hyperlink. Sebenarnya banyak jenis dari tooltip yang sudah dibuat oleh para master web desain, dari yang hanya sekedar menggunakan elemen title, elemen css, elemen javascript, elemen jQuery dan masih banyak lagi. Kedepannya Blogger Tune-Up akan memberikan tutorial tentang tooltip jenis lainnya.

Integrasi jQuery Bubble Info pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

p.popup {
display:none;
height:42px;
padding:3px 30px 5px 10px;
position:absolute;
width:260px;
background-attachment: scroll;
background-color: transparent;
background-image: url(http://s2.sigmirror.com/files/58405_dzlw1/link_bubble.png);
background-repeat: no-repeat;
background-position: left top;
}
.bubbleInfo  {
position:relative;
z-index:100;
text-shadow:#000 1px 1px 1px;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan kode dibawah ini diatas kode pada langkah 5:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('.bubbleInfo').each(function () {
var distance = 20;
var time = 150;
var hideDelay = 100;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var picu = $('.picu', this);
var info = $('.popup', this).css('opacity', 0);
$([picu.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
return;
} else {
beingShown = true;
info.css({
top: -23,
left: -270,
display: 'block'
}).animate({
left: '-=' + distance + 'px',
opacity: 0.95
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
left: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
//]]>
</script>

Langkah 7
Simpan template...

Integrasi jQuery Bubble Info pada Hyperlink

Secara sederhana untuk mengaktifkan jQuery Bubble Info pada hyperlink sebagai berikut:

Dibawah ini adalah contoh hyperlink standar:

<a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a>

Tambahkan kode jQuery Bubble Info seperti dibawah ini:

<div class="bubbleInfo">
<a class="picu" href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a>
<p class="popup">Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono.</p>
</div>

Yang di blok adalah kode tambahan untuk mengaktifkan jQuery Bubble Info.

Download jQuery Bubble Info

Keterangan:

• Setelah jQuery Bubble Info diintergariskan pada template maka seluruh hyperlink baik pada template maupun pada artikel bisa ditambahkan jQuery Bubble Info.
• jQuery Bubble Info ini cocok diterapkan pada sidebar

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan Kaki:
[1] Wikipedia Tooltip