Cara Membuat Bubble Tooltips Dengan CSS

fungsi Bubble Tolltips adalah memberikan sedikit deskripsi atau keterangan pada suatu Link, untuk lebih jelasnya silahkan lihat gambar dibawah ini.

Jadi kesimpulannya yang dimaksud Tooltips itu sebuah deskripsi singkat saat kursor diarahkan pada suatu link.

Cara membuatnya :

1. Login ke blog kamu.

2. Pilih Rancangan.

3. Pilih EDIT HTML.

4. Cari kode ]]></b:skin>

5. Setelah ketemu letakan kode dibawah ini tepat diatas kode nomor 4 berwarna merah tadi.

 

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
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(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

Simpan templatenya.

6. Langkah terakhir untuk mengaktifkan Tooltips pada suatu link cukup gunakan kode dibawah ini.

<a href="URL Link Disni" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>

KETERANGAN :
Ganti kode yang berwarna merah dengan URL Link.
Ganti kode yang berwarna biru dengan Text yang sesuai dengan URL posting.
Ganti kode yang berwarna ungu dengan Deskripsi Tooltips nya, jadi pada saat disorot oleh mouse maka akan muncul kata-kata yang berwarna ungu.