Karena banyaknya pertanyaan tentang tooltips, ini nopz kasi script tooltips yang jalan mulus baik di IE maupun di FF. Untuk yang belum tau apa itu tooltips, tooltips itu adalah sesuatu (tulisan atau gambar) yang muncul bila mouse kita arahkan ke suatu object dalam web kita. Preview : [img]http://img516.imageshack.us/img516/493/tooltipsbh3.jpg[/img] Contoh sederhana untuk menjelaskan apa itu tooltips, arahkan mouse ke logo FriendsterTalk yang ada di forum iini (di bagian atas), akan muncul tulisan "friendsterTalk - Friendster Forum" .... nah itu yang dinamakan dengan tooltips .... Langkah pertama yang harus dilakukan adalah kopas (copy/paste) script di bawah ini ke dalam file js kalian. (panjang banget yah?). Setelah selesai kopas, di save aja dulu. <">CARA MENGGUNAKAN Format umum dari tooltips ini adalah sebagai berikut : [quote][b]title="parameter1=[value1] parameter2=[value2] parameter3=[value3]......"[/b][/quote] Ada banyak parameter yang dapat digunakan, tapi di sini saya cuma mo ngasi beberapa aja yang biasa dipakai/dibutuhkan. Parameter Header. Default value = blank Value yang diperbolehkan = string Gunanya untuk tampilan header dari tooltips. Parameter Body. Default value = blank Value yang diperbolehkan = string Gunanya untuk tampilan isi dari tooltips. Parameter Fadespeed. Default value = 0.04 Value yang diperbolehkan = nilai antara 0 dan 1 Gunanya untuk menentukan seberapa cepat tooltips akan muncul (fade in). Parameter Delay. Default value = 0 Value yang diperbolehkan = integer Gunanya untuk menentukan delay dalam milisecon sebelum tooltips muncul. CONTOH : Misalnya anggap kita mempunyai halaman web dengan tag DIV seperti ini : [quote]<DIV style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px"> Isi dari DIV bla bla bla </DIV>[/quote] Kita ingin menambahkan tooltips pada tag DIV tersebut sehingga bila cursor diarahkan ke bagian tersebut muncul tooltips. Caranya adalah dengan menambahkan title="header=[header text] body=[body text]" dalam tag DIV tersebut. Jadi seperti ini : [quote]<DIV [color=blue][b]title="header=[Contoh Header] body=[Isi dari tooltips]"[/b][/color] style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px"> Isi dari DIV bla bla bla </DIV>[/quote] Atau seandainya ingin menambahkan image dalam tooltips : [quote]<DIV [color=blue][b]title="header=[Contoh Header] body=[Isi dari tooltips<br><img src='IMAGE URL'>]"[/b][/color] style="BORDER: #558844 1px solid; WIDTH:200px; HEIGHT: 75px"> Isi dari DIV bla bla bla </DIV>[/quote] Beberapa contoh lain. (yang ada di js nopz) <">Dalam beberapa contoh diatas saya menggunakan tooltips pada tag DIV dan sekaligus mengubah isi dari tag DIV tersebut. Tapi sebenarnya tooltips ini dapat pula digunakan pada tag lain dan tanpa mengubah isi dari tag tersebut. Jadi kita hanya menambahkan tooltips saja. Contohnya bila kita ingin menambahkan tooltips pada controlpanel buttons yang memakai tag <LI>. <">Tapi ingat .. tampilan tombol CP yang dilihat oleh pageowner berbeda dengan apa yang dilihat oleh pageviewer. Selamat mencoba .... Untuk pemakaian tooltips pada header dari fungsi addBox, dapat menggunakan [url=http://h1.ripway.com/fti/nopzgen.html][b]NOPATHZ ADDBOX GENERATOR[/b][/url]

Last edited by nopathz (2008-07-04 05:14:49)