Membuat Tooltips dengan jQuery

Apa itu tooltips? Saat anda membuka facebook, coba arahkan mouse di atas gambar profil atau link nama seseorang, setelah beberapa saat akan muncul kontainer yang berisi deskripsi dari ornag tersebut, kurang lebih seperti itulah tooltips.

Sebelum menuju tutorial, anda dapat men-download sourcenya

Link : source code[54.67 KB]

Tutorial ini hanya membahas pembuatan tooltips untuk desain web(HTML, CSS, dan jQuery) tidak sampai ke AJAX. Mungkin AJAX akan dibahas di lain kesempatan. Berikut adalah tahap-tahap membuatnya:

1. HTML

Kode :

<div class="gambar">
        <a id="tooltips_trigger" href="#">
        <img src="image/chi2.jpg" alt="Foto Kucing 1" />
    </a>
            <div  id="hidden_tips">
        <img src="image/chi1.jpg" alt="Foto Kucing 2" />
    </div>
</div>

Penjelasan :

• Kode diatas adalah potongan source kode HTML yang yang menjadi inti untuk tutorial ini , sementara kode lainnya pada source code hanya sebagai pelengkap.
• Buat tag <img>  di dalam tag <a>. Beri nama id pada tag <a> dengan id = tooltips_trigger.
• kontainer dengan id = hidden_tips adalah kontainer yang akan di tampilkan saat mouse berada diatas kontainer id = tooltips_trigger
• Id di dua kontainer ini nantinya akan digunakan di css untuk pembuatan desain dan di jQuery sebagai selektor 

2. CSS

Kode:

#hidden_tips{
        position:absolute;
        display:none;
        z-index: 9999;
    }

Penjelasan:

• Pada saat kontainer id = hidden_tips di tampilkan maka akan mempengaruhi posisi dari element lain, oleh karena itu posisinya diset position:absolute
• Untuk menyembunyikan kontainer ini sebelum mouse berada diatas image, digunakan kode display:none
• Untuk menentukan posisi kontainer pada dimensi di sumbu-z  (keluar ke arah layar) ,css mendefinisikan kode z-index yang menyatakan prioritas posisi tampilan kontainer jika pada x dan y yang sama. Semakin besar z-index maka semakin berada diatas. Pada saat image di hover, kontainer dengan id = hidden_tips harus berada posisi teratas dari kontainer sekelilingnya, karena itu di beri z-index: 9999

3. jQuery

Tutorial ini menggunkan framework jQuery, bagi anda yang baru mengenal jQuery, dapat mempelajarinya secara lengkap disini.

Sebelum menulis kode jQuery, web harus memuat file jQuery (sudah ada pada source code) untuk menggunaan kode jQuery. Jika file ini tidak dimuat, web tidak akan mengenali sintax  yang didefinisikan oleh jQuery dan hanya akan mengenali sintax javascript biasa. Oleh karena itu, muat dahulu file jQuery seperti berikut :

<script type="text/javascript" src="Js/jquery.js"></script>

Untuk memulai menggunakan sintax dari jQuery, buat tag <script> baru dan tulis kode dibawah:

$(document).ready(function(){            
    // tulis kode disini
});

Selanjutnya letakkan kode jQuery dibawah ini didalamnya(di tempat komentar "//").

var width = $('#hidden_tips').width();
var height = $('#hidden_tips').height();
var koordinat_x = null; 
var koordinat_y = null;

$('a#tooltips_trigger').mousemove(function(e) {
            koordinat_x = e.pageX+20;
            koordinat_y = e.pageY+20;
            $('#hidden_tips').css({  left: koordinat_x ,top: koordinat_y });
            });    
        
$('a#tooltips_trigger').hover(function(){                
            $('#hidden_tips').show()
        },function(){
            $('#hidden_tips').hide()    
        })    

Penjelasan:

• Inisialisasi variabel yang dibutuhkan 

1. width untuk mengambil lebar dari kontainer dengan id = hidden_tips
2. height untuk mengambil tinggi dari kontainer dengan id = hidden_tips
3. koordinat_x merupakan variabel yang menampung koordinat mouse di posisi x
4. koordinat_y merupakan variabel yang menampung koordinat mouse di posisi y

• fungsi .hover() bekerja pada saat komponen ini di hover(mouseover), sebuah aksi akan dilakukan dan saat mouse keluar dari kontainer id = tooltips_trigger(mouseout) aksi lainnya dilakukan
• Untuk aksi memunculkan kontainer digunakan .show() , sedangkan untuk aksi menyembunyikan kontainer digunakan .hide()
• Agar kontainer id = hidden_tips mengikuti pergerakan mouse didalam kontainer id = tooltips_trigger , maka digunakan fungsi .mousemove() . Penangkap koordinat mouse adalah evant. Event disimpan pada variabel e dan untuk mereprentasikan posisi koordinat ke dalam angka digunakan perintah e.pageX untuk koordinat x dan e.pageY koordinat y
•  Fungsi .css() adalah untuk peletakan kontainer id = hidden_tips yang selalu di-update berdasarkan pergerakan mouse pada koordinat x dan y.

Sekian tutorial ini, meskipun masih sederhana semoga bermanfaat banyak,selamat mencoba
Link : source code[54.67 KB]