Creating Bubble ToolTips 100% Uses CSS

Bubble Tool Tips are useful to provide information about a link (could refferal link so many people that follow). If it is moved over the link (hover) it automatically bubble tool tips will come out with all the information is written. Usually to make a balloon tip is some people call the javascript which will overload the blog with a very large size. Well this is the trick that uses pure CSS as the calling code. To see a live preview please just click this link .

This trick uses CSS, and here it is code:
/*———- 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/AVvXsEiFVyAWiV4ZN06gI1dgLcWFVrhO6rHSronPUkKsldzRR8jkKV-Ssi-03TTC3xE7Qyw63UIPEPOmP8K6obRreUOX0_11AZ-jAqRoTjQSbko3-dd1TE_UChzvx_OdUN5e137d4W0ebMhjj1Y/) no-repeat top;
}
a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyD3plgainbRgeN92bJ3Ubz2oVznwjG6_GxernSNS9jWUKqIH9CS4-aGBzx0ipIAwYqZBghuEWA7yu_Mh3VMdbXzl9jSzJ8FN5iQJ8Mzx8KBoxD3iTbqDJmIftNxMnKoOAuUpVzc3cv-s/) repeat bottom;
}
a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFVyAWiV4ZN06gI1dgLcWFVrhO6rHSronPUkKsldzRR8jkKV-Ssi-03TTC3xE7Qyw63UIPEPOmP8K6obRreUOX0_11AZ-jAqRoTjQSbko3-dd1TE_UChzvx_OdUN5e137d4W0ebMhjj1Y/) no-repeat bottom;
}
/*———- balon tips END———–*/
How to To use:
1. Links that have been made ​​in the given declaration class = “bt”.
The links in HTML code looks like this <a href=”http://dindingcoret.com”></a> Once given the declaration would be like this: <a href=”http://dindingcoret.com”></a>
2. Declare balontips. Call balontips by writing code <span=”balontips”></span>. Enter a link between the code.
3. Call the image above by typing <span=”atas”></span>. Enter the code between “balontips”.
4. Call the center of the image by typing <span=”tengah”></span>. Enter the code between “balontips” under the code “above”. This place pal pal write comments.
5. Call the image below by typing <span=”bawah”></span>. Enter the code between “balontips” under the code “middle”.
Example code can be found here:
<a href=”URL SOBAT“>
Title here..
<span>
<span>
</span>
<span>
Description here..
</span>
<span>
</span>
</span>
</a>