Bubble Tool Tips using CSS

Bubble Tool Tips are very useful to provide information about a link. If the mouse is moved over the link (hover) so automatically bubble tool tips will come out and show the information you need. Usually Bubble Tool Tips to make this some people call him with a javascript that will burden the blog with a very large size. Well this is the trick that uses pure CSS as the calling code.

This trick is created using CSS, and this source code:

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

a.bt span{ display: none; }

/*background:; IE hack, had to change something to display in IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.bubbletips{
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.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4lSnU7Yi5wHCXWdyiIqgGzGk8I5SRFFmOJIUduc8YzUqE6qNUA5aG9pm-D2SZxZOigWyJ0Sws0tfEfEO1CI1ZBPSszUHlwS77UGC6-eAya-39z4YQQHyhyphenhyphen3ZVRahEWVYH742ZuiILBE4/) no-repeat top;
}

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

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

/*---------- Bubble Tool Tips-----------*/

Examples of writing code can be found here: