Creating "Bubble Tool Tips" 100% CSS

Bubble Tool Tips are very useful to provide information about a link (could link refferal so many people that follow). When moved over the link (hover) it will automatically bubble tool tips will come out with all the information that is written. Usually to make a balloon tip is some people call him with javascript that would 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. 

Application of this trick use CSS, and this is it 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, need to change something to display in 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.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJfvDRGqdrNlV_VIqn6DjKr3PxK5YJeEL45oAS1OEzWiUASGypkLdrHsrsuV-jlQHysr__aq6CIKiCUQ9tJk5wDcjDw-NTHjGX4r5NOIXj3sJG6KUzHtIE0GCUlokqG3P78pxTwlDGLac/) no-repeat top;
}

a.bt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5Nj0pbztQ_ux0EPlKbrcIErQwz55QyEc2x8-2srU5tQUSMOEzmP_iUWR24Q-YJeV5MN-r-BsNOEtFuEQzOTPKoV1lnzmErYm6ba3l_xzyDVbHe5BFWMTdKD1C-qOzQiOOOgHT9mRquQ/) repeat bottom;
}

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

/*---------- Balloon tips ----------- END * /

To use:

1. The link you've made in the declaration of 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 class="bt" href="http://dindingcoret.com"></a>

2. Declare balontips. Call and write your code balontips <span="balontips"> . Enter the code between the links.

3. Call the image above by typing <span="top"> . Enter the code between "balontips".

4. Call center image by typing <span="center"> . Enter the code between "balontips" under the code "above". This is the place to write comments pal pal. 

5. Call the image below by typing <span="bottom"> . Enter the code between "balontips" under the code "middle".

Examples of writing code can be found here:

<a class="bt" href="YOUR URL">
words up to you ...
<span class="balontips">
<span class="top">
</span>
<span class="center">
Place pal write info about the link and it will come out as a form of balloons
</span>
<span class="bottom">
</span>
</span>
</a>

Related Articles