Cara membuat tool tips

By : Wahyu W
Pernahkan anda ketika mengarahkan pointer mouse ke sebuah object lalu muncul balon yang berisi penjelasan object tersebut ? …nah itulah tool tips.
Tool tips digunakan untuk memberikan penjelasan instan / singkat pada sebuah object. Seperti terlihat pada gambar dibawah ini :

Kita dapat membuat tool tips dengan memanfaatkan library jQuery dan JQueri better tool tips yang dibuat oleh Jon Cazier.
Caranya sangat sederhana :
1. Sisipkan 3 file diantara tag head : ( style.css, jquery-1.3.1.min.js, jquery.betterTooltip.js )

<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			$('.tTip').betterTooltip({speed: 150, delay: 300});
		});
	</script>

2. Kemudian pada bagian object yang akan diberi tool tips, dengan memanggil class=”tTip” pada link, dan isikan title untuk keterangannya.
Sebagai contoh :

 < a href="url anda" class="tTip" title="Ini adalah keterangan tool tips">Klik disini </a>

Sederhana bukan ? silahkan mencobanya. Untuk mendownload library jquery tool tips, anda dapat berkunjung ke http://ajaxrain.com atau klik disini

%d blogger menyukai ini: