Membuat "Bubble Tool Tips" 100% menggunakan CSS

Penulis: Eldo A Pradana | dindingcoret.com

Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini .

 

Penerapan trik ini pake CSS, dan ini dia codenya:

/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
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.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}

a.bt:hover span.bawah{
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;
}

/*---------- balon tips END-----------*/

 

Untuk penggunaannya:

 

1. Link yang udah dibuat di kasih deklarasi class="bt".

Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>

 

2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.

 

3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".

 

4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.

 

5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".

 

Contoh penulisan code bisa dilihat disini:

<a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>