Cara memasang tooltip dengan javascript

Biar tutorial ini menjadi bikin anda penasaran, coba anda arahkan mouse anda pada text berikut ini. Cara memasang tooltip dengan javascript Setelah mouse anda arahkan pada text diatas untuk beberapa saat, maka anda akan melihat sebuah tampilan kotak yang berisi diskripsi yang menjelaskan tentang isi dari text tersebut. Kotak yang muncul inilah yang disebut dengan tooltips. Trus bagaimana cara membuat tooltip seperti diatas? Untuk itu ikuti tutorial ini hingga selesai.

Untuk membuat tooltip diatas kita memerlukan kode javascript. Untuk kode scriptnya bisa anda lihat pada kotak dibawah ini.

Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan kode style. Kode yang diperlukan seperti berikut ini.

Kode script dan style diatas sebelumnya letakkan dihosting anda. Jika anda menggunakan blogger, maka anda bisa menggunakan saran untuk meletakkan javascript seperti pada posting solusi hosting javascript di blogger . untuk kode style bisa digabungkan dengan kode style blog di atas .

Setelah kode javascript dan style telah diletakkan dengan benar, maka selanjutnya kita meletakkan kode tooltip di tempat yang kita inginkan. Misalnya kita ingin memasang tooltip pada link referral. Dengan begitu akan membuat pembaca lebih tertarik untuk bergabung dengan referral kita. Misalnya kita ingin meletakkan tooltip di text Cara memasang tooltip dengan javascript. Maka hasilnya menjadi seperti berikut ini. Kode yang kita pasang pada sebuah link :

onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()"

 

keterangan : merah = text yang kita inginkan muncul di tooltip Biru = lebar kotak yang kita inginkan secara keseluruhan kodenya menjadi seperti berikut ini.

onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()" href="http://www.o-om.com/2010/02/cara-memasang-tooltip-dengan-javascript.html" target="_blank">Cara memasang tooltip dengan javascript

 

jadi kode tersebut bisa kita pasang pada link refferal, banner atau yang lainnya. untuk mengubah warna background kotak tersebut bisa kita lakukan melalui style css diatas. Akhirnya selesai juga tutorial javasript episode kali ini. semoga tutorial ini bisa berguna untuk anda. Terima kasih banyak buat  yang sudah mau menampilkan tulisan saya.

Penasaran siapa dibalik penulis artikel ini? Anawia putra | anawia.com