b-media: 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.b-media.web.id/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 …

Ada apa dibalik tahun 3 Maret 1924? Kehancuran Persatuan, yang menimbulkan bencana dahsyat sepanjang sejarah manusia.

Maret

Sebuah institusi yang mempersatukan manusia dari berbagai ras, institusi yang mempersatukan manusia dari berbagai agama, dipecah-pecah oleh para perusak yang rakus harta

1924

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, Al-Khilafah Al Islamiyah

kemudian di bagian headnya tambahkan style seperti ini :

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

Inti yang terjadi adalah, ketika linknya di sorot

$(“#container a” ).hover(function(){

tampilkan anak dari linknya

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