Pasang Iklan | Download Mozilla Terbaru | Zodiak Hari Ini | Jadwal Bola TV
Google

Bikin ToolTip Sederhana Menggunakan CSS

Diterbitkan oleh pada hari Rabu, 02 Februari 2011
Tooltip
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 Bisnis OnlineBisnis Online ini bisa dikerjakan siapa saja yang ingin mendapat keuntungan lebih dan santai.


Saat kursor kamu arahkan ke link Bisnis Online, 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...