Selamat malam, pagi, siang ataupun sore..! jumpa lagi bersama saya di Tutorial Web Development. Pada Tutorial Web Development kali ini penulis akan membahas bagaimana “Membuat Tooltip dengan JQuery clueTip“. Sebelum kita melangkah dan melompat lebih jauh, penulis akan menjelaskan terlebih dahulu apa itu Tooltip. Tooltip adalah sebuah kotak atau box yang tampil ketika cursor/penunjuk mouse diarahkan ke suatu elemen pada halaman website.
Tooltip berguna untuk memberikan penjelasan atau deskripsi pada sebuah link, gambar atau bagian-bagian website lainnya.
Untuk lebih memperjelas contoh tentang tooltip… Silahkan anda lihat pada gambar di bawah ini :
Untuk dapat membuat Tooltip seperti pada gambar diatas, kita membutuhkan beberapa file yang dapat anda download di https://github.com/kswedberg/jquery-cluetip/downloads. Atau anda dapat langsung mendownload file contoh selengkapnya dari artikel ini , yang akan penulis berikan pada bagian penutup di akhir tutorial ini.
Berikut ini file-file yang dibutuhkan :
-jquery.cluetip.js
-jquery.hoverIntent.js
-jquery.cluetip.css
Ok, clueTip sudah anda download, kita dapat langsung mencoba meng-impelementasikan clueTip pada sebuah halaman web seperti contoh dibawah ini.
Silahkan anda buat file HTML dan berikut ini listing code nya :
<html>
<head>
<title>Belajar bikin tooltip gitu!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" /></script>
<script type="text/javascript" src="jquery.cluetip.js" /></script>
<script type="text/javascript" src="jquery.hoverIntent.js" /></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();
$('#bufferdie').cluetip({
splitTitle: '|', // tanda | digunakan sebagai pemisah antara judul dan isi
showTitle: true // menampilkan heading clueTip
});
$('#gambar').cluetip({
splitTitle: '|',
showTitle: false // menyembunyikan heading clueTip
});
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<style type="text/css" />
body { background: #ccc; margin: 2%; }
a { color: #000; text-decoration: none; } a:hover { text-decoration: overline; }
</style>
</head>
<body>
<!-- menampilkan content tooltip dari file isitultip.html: -->
<p><a href="http://bufferdie.co.cc" rel="isitultip.html">Ini dia tooltip nya!</a></p>
<!-- menggunakan title untuk menampilkan content tooltip -->
<p><a id="bufferdie" href="http://bufferdie.co.cc" title="informasi penting!|ketampanan bfd telah diakui oleh berbagai kalangan. Berbagai kalangan telah mengakui ketampanan bfd.">Bufferdie</a></p>
<!-- menampilkan tooltip pada sebuah gambar tanpa menampilkan heading-->
<p><img id="gambar" src="bfd.jpg" title="ini bukan foto bfd lho! percaya ga? kalo ngga yasudah... :-q~~ ketampanan bfd telah diakui oleh berbagai kalangan... ketampanan bfd telah diakui oleh berbagai kalangan." /></p>
</body>
</html>
Pada code :
<a href="http://bufferdie.co.cc" rel="isitultip.html">Ini dia tooltip nya!</a>
content atau isi dari tooltip diambil dari file isitultip.html. Sedangkan pada code berikutnya content diambil dari attribute title pada tag a dan img.
Bagaimana? mudah bukan? tertarik untuk mencobanya? silahkan dikembangkan sesuai dengan kreativitas anda, panduan lengkap kostumisasi nya dapat anda lihat di http://plugins.learningjquery.com/cluetip/#options
Akhir kata, penulis ucapkan selamat mencoba.. dan sampai bertemu kembali pada tutorial2 berikutnya… ^_*
Lanjutkan omz bufferdie