How to Create Bubble Tooltips with CSS?

Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. Besides that if you have an advanced site in the first place you probably have enought javascript already.

Also with the IE hack for the :hover state, you can do this with elements besides anchors.

If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.

View Demo here!!!


To create it we just need for the simple steps

Login to your blogger account >> n than choose layout option >> click Edit HTML n don't forget to download template complete (don't be lazy, OK)

So, replace tag ]]></b:skin> with following code

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
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.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0VM0el-zJya54VRzI84tCVi1-786ITlUtEImGR6JaaWr3FewE0BqnBr12f7_Y9wU8K2D3sCB69jlPX6ZXvdjicBM-1-9G9p2X68rjkGB3OkkTjICmK5qbz-AVGgSoNUhKVEirRwbXlw/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPV44w8PXzzFY_1vZggU87toccFMKb-3bFzBZAwYEOQiRRYnMK470IV-HTjohN0cIXhTNldPI9P8nyVnXO0OyfKvrvGh1hh-ntz0fcT-p39wh2IYYhxz6rSLpAsyl4wUTYVFoQMXePdgg/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0VM0el-zJya54VRzI84tCVi1-786ITlUtEImGR6JaaWr3FewE0BqnBr12f7_Y9wU8K2D3sCB69jlPX6ZXvdjicBM-1-9G9p2X68rjkGB3OkkTjICmK5qbz-AVGgSoNUhKVEirRwbXlw/) no-repeat bottom;
}
]]></b:skin>

N than save your template

The last step, when you want to post a new entri you must use the folowing code

<a href="URL Link here!!!" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>

Make it easy, n goOd LuCk for you....if you hv any question you can contact me






Trick Source: Trentrichardson.com

Tutorial Style inspired by: Kang Rohman style

Tags: how to create bubble tooltips, making bubble tooltips, bubble tooltips with CSS, simple step to create bubble tooltips