Membuat Tooltip dengan CSS & jQuery

Tooltips merupakan sebuah tools yang memberikan kita informasi atau keterangan dari link atau gambar yang kita sorot, dengan menambahkan tools ini akan sangat membantu para pengunjung dalam memperoleh informasi dari sebuah link atau gambar tertentu.
Tooltips yang saya akan bahas kali ini adalah tooltip yang menggunakan CSS & jQuery. Langkah pembuatan tooltips ini cukup sederhana dan mudah dipraktekan bahkan untuk yang teman-teman yang baru mengenal jQuery.
Demo bisa dilihat di footer blog ini.
Silahkan teman-teman simak baik-baik cara menambahkan tools ini ke dalam blog kita, berikut ini langkah-langkahnya
CSS
Langkah pertama adalah penambahan CSS, untuk penempatan CSS biasanya diantara <b:skin><!CDATA[ dan [[</b:skin>.

.tip {
   color: #fff;
   background:#1d1d1d;
   display:none;
   padding:10px;
   position:absolute; z-index:1000;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
}

untuk menyesuaikan CSS dengan template silahkan anda berkreasi sendiri agar tampilannya sesuai dengan template anda, khusus untuk teks yang berwarna merah pastikan angkanya tetap 1000 untuk membuatnya berada pada layer paling atas.
jQuery
Selanjutnya anda tambahkan kode jQuery setelah kode <head> atau </head>, untuk kodenya anda bisa download di situs pengembangnya atau anda bisa menggunakan kode jQuery dibawah ini yang sudah di hosting di Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

Setelah itu tambahkan kode script dibawah ini tepat setelah kode tadi

<script src="http://goomelar.googlecode.com/files/tooltip.js" type="text/javascript"></script>

atau teman-teman bisa mendownloadnya terlebih dahulu script-nya disinidan menyimpannya di hosting pribadi.
HTML
Sekarang kita masuk ke langkah penerapannya pada HTML, ada empat style yang bisa teman-teman terapkan yaitu:
1. Tooltips sederhanaStyle ini adalah yang paling mudah dimana sebuah teks jika disorot akan memunculkan keterangan berupa teks juga.

<a href="#" class="tip_trigger">Teks <span class="tip">Keterangan</span></a>

2. Teks dengan keterangan gambarSebuah teks jika disorot maka akan memunculkan sebuah gambar sebagai keterangannya.

<a class="tip_trigger" href="#">Teks<span class="tip"><img src="URL Gambar"/></span></a>

3. Gambar dengan keterangan teksStyle yang ini adalah kebalikan dari style yang kedua yaitu apabila kita menyorot sebuah gambar maka akan muncul keterangan berupa teks

<a class="tip_trigger" href="#"><img src="URL Gambar"/><span class="tip">Teks</span></a>

4. Gambar dengan keterangan gambarStyle ini akan memberikan keterangan berupa gambar apabila kita menyorot sebuah gambar

<a class="tip_trigger" href="#"><img src="URL Gambar"/><span class="tip"><img src="URL Gambar untuk Keterangan"/></span></a>

sumber:http://goomelar.blogspot.com - Membuat Tooltips dengan CSS & jQuery

Pages

Membuat Tooltip dengan CSS & jQuery

7 Responses to "Membuat Tooltip dengan CSS & jQuery"