Membuat Bubble Tool Tips 100% Memakai Css

Penulis: Eldo A Pradana | dindingcoret.com

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

 

Penerapan trik ini pake CSS, dan ini beliau 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCnIxzm9tPkgUEDvkTyTXyxHCiwQv6bHP7A3Zc0CJ5XJUHIptR2vx7IH4Fo4e6fCDelW2FzqRaLnahy_Jy4Np6nHTrK_fgHxJgEWZNI9XTnWvFQJEWlBmtfVY5jBx-sTUcI1EsVTIAnM/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHDe65ak2sa2lDfLGTlGRDry84l7_0UXnhR47vC9fuNEIPgQDC_dTToNvlkQKzmZ8n3OVYJYaOrLewWVXfG_J6ykizMJjBdp_f71wae9g4_AIq6TumwmYfK3VlXqOb3UfRYLse9n_uRE/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCnIxzm9tPkgUEDvkTyTXyxHCiwQv6bHP7A3Zc0CJ5XJUHIptR2vx7IH4Fo4e6fCDelW2FzqRaLnahy_Jy4Np6nHTrK_fgHxJgEWZNI9XTnWvFQJEWlBmtfVY5jBx-sTUcI1EsVTIAnM/) no-repeat bottom;
}

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

 

Untuk penggunaannya:

 

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

Link dalam code HTML bentuknya menyerupai ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi menyerupai 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 instruksi "balontips".

 

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

 

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

 

Contoh penulisan code dapat dilihat disini:

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