Tooltip - jQuery tipsy

Beberapa waktu yang lalu Blogger Tune-Up pernah membahas tentang Bubble Info atau Tooltip atau Bubble Help^[1], sekarang kita akan mencoba jenis lain dari tooltip tersebut. Masih berbasis framework jQuery, kita akan mencoba mengintegrasikan tipsy^[2] pada Blogger yang diadaptasi dari "tipsy - Facebook-style tooltip plugin for jQuery^[3]". Perbedaan mendasar antara jQuery Bubble Info dengan jQuery tipsy terletak pada posisi bubble (balon) yang fleksibel (kadang diatas, dibawah, dikiri atau dikanan) tergantung posisi hyperlink pada browser, sedangkan jQuery Bubble Info hanya akan muncul pada sebelah kiri hyperlink. tipsy merupakan salah satu jenis tooltip yang banyak digunakan oleh para blogger dan website-website besar lainnya semisal twitter.

Integrasi jQuery Tipsy Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

]]></b:skin>

Langkah 5
Masukan kode CSS dibawah ini diatas kode pada langkah 4:

.tipsy { padding: 5px; font-size: 11px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S6b_ZTr4jPI/AAAAAAAAD74/I5PC4YCqf3Q/d/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; 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; }

Langkah 6
Cari kode dibawah ini:

</head>

Langkah 7
Masukan kode JavaScript dibawah ini diatas kode pada langkah 6:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hensblog.googlecode.com/files/jquery.tipsy.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
infobalon();
});
</script>

Langkah 8
Simpan template

Integrasi jQuery Tipsy Pada Hyperlink

Ada beberapa hal yang harus diperhatikan dalam proses integrasi tipsy pada hyperlink seperti dijelaskan dibawah ini.

• Untuk mengaktifkan tooltip - jQuery tipsy tambahkan/gunakan tag "id" atau "class" (tanpa tanda kutip) didalam tag hyperlink.
• Pilih salah satu jenis "id" atau "class" didalam tag hyperlink, "balonkk" untuk mengaktifkan tipsy pada sebelah kiri atau kanan, dan "balonab" untuk mengaktifkan tipsy pada sebelah atas atau bawah.
• Posisi kiri, kanan, atas dan bawah akan dipilih secara otomatis tergantung posisi hyperlink terhadap browser.

Perhatikan contoh kode dibawah ini!
Untuk posisi tipsy diatas atau dibawah;

<a class='balonab' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>

atau;

<a id='balonab' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>

Untuk posisi tipsy dikiri atau dikanan;

<a class='balonkk' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>

atau;

<a id='balonkk' href='#' title='Isi Tooltip - jQuery tipsy'>Hover over me</a>

• Keterangan yang akan muncul pada tipsy diambil dari keterangan didalam tag title (misal; title='Isi Tooltip - jQuery tipsy', maka yang muncul dalam tipsy adalah kata "Isi Tooltip - jQuery tipsy"), selain itu kita juga bisa menggunakan format HTML pada tag title pada hyperlink, seperti contoh dibawah ini:

<a id='balonab' href='http://modification-blog.blogspot.com/' title=' <b>Blogger Tune-Up</b> adalah teknologi blog populer yang dipelihara oleh <b><u><i>Dede Hendriono</i></u></b>. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi'>Hover over me</a>

• Fungsi tag <b>...</b> untuk huruf Bold/Tebal, <i>...</i> untuk huruf Italic/Miring, <u>...</u> untuk huruf Underline/garis bawah, dan lain sebagainya...

Download Demo - Source Code jQuery Tipsy

Catatan kaki:
[1] Tooltip - jQuery Bubble Info
[2] Tipsy
[3] Jason Frame