Membuat ToolTip dengan JQuery

Apa itu tooltip? Mengapa tooltip diperlukan? Bagaimana membuat tooltip? Di mana rumahnya tooltip? Penulis akan jelaskan semuanya tapi tidak termasuk pertanyaan yang terakhir, karena ini merupakan pertanyaan yang tidak akan penulis jelaskan jawabannya. Tooltip sendiri dibuat biasanya menggunakan javascript, dan sekarang penulis akan menjelaskannya dengan menggunakan jquery.

Okeh… :D… (Maaf, terkadang memang penulis sedikit telat dalam ketawa) Sebelum masuk ke dalam penjelasan, silahkan terlebih dahulu lihat demonya di sini http://www.ilmuwebsite.com/file_tutorial/jquery2/tooltip.html Bagaimana ?? Begitulah tooltip.

Mari kita siapkan terlebih dahulu sebuah file html, penulis berikan namanya tooltip.html, di bagian bodynya di isi seperti ini …

<div id=”container”>
<a href=”#”><strong>3</strong>
<div><p>Ada apa dibalik tahun 3 Maret 1924? Kehancuran Persatuan, yang menimbulkan bencana dahsyat sepanjang sejarah manusia.</p>
</div></a>
<a href=”#”><strong>Maret</strong>
<div><p>Sebuah institusi yang mempersatukan manusia dari berbagai ras, institusi yang mempersatukan manusia dari berbagai agama, dipecah-pecah oleh para perusak yang rakus harta</p>
</div></a>
<a href=”#”><strong>1924</strong>
<div><p>Namun akan kembali lagi dalam waktu dekat, institusi yang berisi orang-orang yang ikhlas, yang menghormati agama yang lain, yang menjaga hak rakyatnya, yang memakmurkan rakyatnya dan tidak membedakan agama , yang mempersatukan semua ras di dunia, sebuah sistem, <strong>Al-Khilafah Al Islamiyah</strong></p>
</div></a>
</div>

kemudian di bagian headnya tambahkan style seperti ini? :

<style type=”text/css”>
body{
margin-top:50px;
}
.tooltip{
border:1px solid #dfdfdf;
background-color: #111;
width:300px;
height:auto;
padding:10px 10px 20px 10px;
display:none;
position:absolute;
-moz-border-radius:9px;
font-size:12px;
color: #fff;
}
a.link{
font-weight:normal;
width:autopx;
height:autopx;
padding:25px 20px 20px 20px;
border:3px solid #111;
text-decoration:none;
color: #fff;
background-color: #ff8000;
font-family: arial;
margin-left:20px;
-moz-border-radius:9px;
}
a.link strong{
font-size:30px;
}
a.link div.tooltip strong{
font-size:11px;
}
</style>

kemudian yang terakhir letakan dibagian headnya yaitu jquery library, dan script untuk membuat tooltip …

<script type=”text/javascript” src=”jquery-1.4.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#container a” ).hover(function(){
$(this).children(“#container a.link div.tooltip” ).fadeIn();
}, function(e){
$(this).children(“#container a.link div.tooltip” ).hide();
});
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’, e.pageY+15).css(‘left’, e.pageX+15);
});
});
</script>

Inti yang terjadi adalah, ketika linknya di sorot
$(“#container a” ).hover(function(){

tampilkan anak dari linknya
$(this).children(“#container a.link div.tooltip” ).fadeIn();

dan jika mousenya pindah-pindah, maka gerakan anak dari linknya
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’, e.pageY+15).css(‘left’, e.pageX+15);

Selesai sudah. Silahkan scriptnya di download disini http://www.ilmuwebsite.com/file_tutorial/jquery2/jquery-tooltip-ilmuwebsite.com.zip

Cara Membuat Website dengan Adobe Dreamweaver

Ingin tau lebih jelas, lebih cerdas, tentang cara pembuatan website? Store Ilmuwebsite menyediakan CD Tutorial Interaktif dengan harga murah, mengantar Anda menjadi seorang web designer yang handal

Mahir PHP MySQL Membuat Aplikasi Dinamis Berbasis Web

Ingin tau lebih jelas, lebih cerdas, tentang cara pembuatan website dinamis atau aplikasi berbasis web? Kami punya solusi yang sangat sangat murah! Lebih ampuh dari hanya sekedar membaca buku, interaktif layaknya kursus PHP biasa