Cara Membuat Tooltip dengan CSS

By Unknown

Jumat, 25 November 2011

Kali ini saya akan share cara membuat tooltip dengan css. Ikuti langkah berikut

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>

<style type='text/css'>
a.tt{position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none}
a.tt span{display:none}
a.tt:hover{z-index:25; color:#aaf; background:}
a.tt:hover span.tooltip{display:block; position:absolute; top:0px; left:0; padding:15px 0 0 0; width:200px; color:#930; text-align:center; filter:alpha(opacity:90); KHTMLOpacity:0.90; MozOpacity:0.90; opacity:0.90}
a.tt:hover span.top{display:block; padding:30px 8px 0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmZ3gpWC1Vf7Oh3nHlXU-nrfWTqYp30YALH4S3CAG0P-T4w6bTdRCzvbaUPwFNL7bPVzE6i4ooR29EN4Lvn1ugbB8bJjLghJO_zxSYbUE3r0nMRmSJHVXC7PlMZ671PAmDUgzklNrtj_K/) no-repeat top}
a.tt:hover span.middle{display:block; padding:0 8px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpO-qq6xZDrNxIgyREql9cLgXiy2xXMVfsUm7cTuZ2VUeLAb-NiNbMqXPtG23NEWcgDsBedBFacn-ntqUZt3dlYoc-uTGxjBkuOxmZFt1wyd0DwWEhE7mpVaRULYrxeDmFJN4qrX1P8jnH/) repeat bottom}
a.tt:hover span.bottom{display:block; padding:3px 8px 10px; color:#548912; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLmZ3gpWC1Vf7Oh3nHlXU-nrfWTqYp30YALH4S3CAG0P-T4w6bTdRCzvbaUPwFNL7bPVzE6i4ooR29EN4Lvn1ugbB8bJjLghJO_zxSYbUE3r0nMRmSJHVXC7PlMZ671PAmDUgzklNrtj_K/) no-repeat bottom}
</style>

Selanjutnya klik Simpan Template
Selanjutnya sertakan kode di bawah ketika anda ingin memberi tooltip pada link anda

<a href="MASUKKAN ALAMAT LINK ANDA DI SINI" class="tt">JUDUL LINK<span class="tooltip"><span class="top"></span><span class="middle">DESKRIPSI ATAU TULISAN DI SINI</span><span class="bottom"></span></span></a>

Klik Simpan atau Terbitkan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+