Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:

A check for DOM support is performed
If found, the title and href attributes of links are extracted from the page and they’re injected into a DOM structure
When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed
Installation and customization of Bubble Tooltips is quite easy. They are composed mainly of four parts:
1)JavaScript:

function enableTooltips(id){
var links,i,h;
if(!document.getElementById || !document.getElementsByTagName) return;
AddCss();
h=document.createElement("span");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i<links .length;i++){
    Prepare(links[i]);
    }
}

function Prepare(el){
var tooltip,t,b,s,l;
t=el.getAttribute("title");
if(t==null || t.length==0) t="link:";
el.removeAttribute("title");
tooltip=CreateEl("span","tooltip");
s=CreateEl("span","top");
s.appendChild(document.createTextNode(t));
tooltip.appendChild(s);
b=CreateEl("b","bottom");
l=el.getAttribute("href");
if(l.length>28) l=l.substr(0,25)+"...";
b.appendChild(document.createTextNode(l));
tooltip.appendChild(b);
setOpacity(tooltip);
el.tooltip=tooltip;
el.onmouseover=showTooltip;
el.onmouseout=hideTooltip;
el.onmousemove=Locate;
}

function showTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
Locate(e);
}

function hideTooltip(e){
var d=document.getElementById("btc");
if(d.childNodes.length>0) d.removeChild(d.firstChild);
}

function setOpacity(el){
el.style.filter="alpha(opacity:95)";
el.style.KHTMLOpacity="0.95";
el.style.MozOpacity="0.95";
el.style.opacity="0.95";
}

function CreateEl(t,c){
var x=document.createElement(t);
x.className=c;
x.style.display="block";
return(x);
}

function AddCss(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","bt.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}

function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
    posx=e.pageX; posy=e.pageY;
    }
else if(e.clientX || e.clientY){
    if(document.documentElement.scrollTop){
        posx=e.clientX+document.documentElement.scrollLeft;
        posy=e.clientY+document.documentElement.scrollTop;
        }
    else{
        posx=e.clientX+document.body.scrollLeft;
        posy=e.clientY+document.body.scrollTop;
        }
    }
document.getElementById("btc").style.top=(posy+10)+"px";
document.getElementById("btc").style.left=(posx-20)+"px";
}

2)CSS

.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

3) A single image in gif format for their graphics
The javascript, the CSS and the image just have to be copied in the same directory of the page and with the default presentation don’t need changes. The lines that should be inserted in the head section are the following:

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

A very important note: the CSS for the tooltips, named bt.css is added dynamically by javascript only if the browser is found to be DOM-capable. If you’re going to modify the file, just be sure to keep its name.

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>
   

On the third line I’ve put in bold the only part that should be modified to fit your needs – it is the id (between quotes) of the element that will contain tooltip-powered links.

Now let’s look more closely at how tooltips works. A sort of invisible markup is added to the page with the aid of the DOM when the mouse rolls over a link. The generated markup is like this:

<span class="tooltip">
<span class="top">title of the link</span>
<b class="bottom">url of the link, max 30 chars</b>
</span>

Each of these span and b element are by default rendered block-level, and the tooltip is positioned by javascript according to the mouse position. The rest of the CSS is fairly simple and uses a single image:

.tooltip,.tooltip *{display:block} /*added by javascript*/ 

.tooltip{ width: 200px; color:#000;
    font:lighter 11px/1.3 Arial,sans-serif;
    text-decoration:none;text-align:center}

.tooltip span.top{padding: 30px 8px 0;
    background: url(bt.gif) no-repeat top}

.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
    background: url(bt.gif) no-repeat bottom}

For your convenience, I’ve prepared a small page with a permanent tooltip in the markup so it would be easier customize the apperence with CSS. When you’re done, just be sure to name the CSS file “bt.css”. Another thing to notice is that a light bit of transparency is added to the tooltips by javascript: it works in IE from 5.5 on, Firefox and Safari.

Demo: http://web-graphics.com/mtarchive/BubbleTooltips.html
Download: http://web-graphics.com/mtarchive/BubbleTooltips.zip
Source: http://web-graphics.com/

Related Listings:

1. Style Your Websites Tooltips With Prototip Now it’s very easy to creat complex tooltips. Here is...
2. ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...

Do you like this post?

Email: