BIKIN TOOLTIP SEDERHANA MENGGUNAKAN CSS

Mumpung lagi seneng-senengnya utak-atik CSS, kali ini juga saya akan share tentang tooltip sederhana pake CSS. Tooltip [Pake bahasa yang gue pahami aja ya...hehe] adalah keterangan yang muncul saat kursor diarahkan ke sebuah link. Kalo masih ribet memahaminya, mending kita lihat saja contoh tooltip sederhana berikut:

Yuk gabung InboxDollarOnline earning dengan survey, ngerjain tugas, ngegame, bonus $5 saat daftar dan banyak lagi.

Saat kursor kamu arahkan ke link InboxDollar maka akan muncul keterangan tentang link tersebut. Nah, kira-kira begitulah maksud dari tooltip. Dan untuk membuatnya adalah sebagai berikut:

Buka template blogspot kamu dan cari kode CSS a:hover dan ganti kode tersebut dengan kode berikut:

a:hover {background:none; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#b3b3b3; border:1px solid #cccccc; color:#6c6c6c;}

Jika sudah, simpan template kamu. Selanjutnya, setiap kali akan membuat link yang bisa menampilkan tooltip, maka penulisannya adalah sebagai berikut:

<a class="tooltip" href="ISIKAN DENGAN URL LINK KAMU">ISIKAN DENGAN TEKS LINK KAMU<span>ISIKAN DENGAN KETERANGAN YANG ADA DALAM TOOLTIP</span></a>

Bandingkan dengan cara penulisan pada link InboxDollar diatas:

Yuk gabung <a class="tooltip" href="http://www.inboxdollars.com/?r=ref8630551">InboxDollar<span>Online earning dengan survey, ngerjain tugas, ngegame, bonus $5 saat daftar dan banyak lagi.</span></a>

Keterangan:

• Kode berwarna merah bisa kamu personalisasi sesuai keinginan kamu.
• Usahan untuk selalu mem-backup template kamu sebelum mencoba mengedit. Sekedar untuk jaga jika terjadi kesalahan.

Selamat mencoba dan moga bermanfaat...

Posted in: CSS,Edukasi,Tips triks,Tooltip