cara membuat tooltip dengan menggunakan css

Jadilah Umat Terbaik Dengan Saling Menasehati
Google+
Haloo, kali ini admin KlikInfo akan berbagi pada teman blogger khususnya blogger baru yang mungkin masih belum tahu bagaimana cara membuat tooltip dengan menggunakan css. Admin memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.

Untuk membuatnya sobat bisa menggunakan cara di bawah ini:

Seperti biasa login ke blog sobat.

  1. Pilh tata letak.
  2. Klik edit html.

Letakkan kode di bawah ini di atas kode ]]></b:skin>hingga posisinya sbb:
.tooltip {position:relative;}
.tooltip span {display:none;}
.tooltip:hover span {
display:block;
position:absolute;
width:200px;
left:20px;
top:20px;
background-color:#006633;
border:3px solid #0099FF;
padding:5px;
font-size:15px;
color:#000000;
text-decoration:none;
font-family:Verdana,arial, helvetica, sans-serif;}
]]></b:skin>

Kemudian klik simpan.

CARA MENAMPILKAN KE DALAM POSTINGAN

<a href="http://rajaninfoku.blogspot.com/" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>
Ganti link yang dicetak merah dengan link milik sobat.
Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.
Cara menulis kodenya seperti di bawah ini:
background:url("http://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
Tooltip

Semoga bermanfaat ya..selamat mencoba!