TechnoSlab

Here's a very simple jQuery tooltip which converts title of a link to tooltip.

• Converts all link's title to tooltip.
  
• Very easy to implement.
  
• Tooltip can have images / icon as well.
  
• Easy to customize and alter looks using css.
  

Include jQuery in your pages :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Now, define the tooltip as follows :

<script>
function d(x){
 return document.getElementById(x);
}
function implementtt(){
 links = document.getElementsByTagName('a');
 num = links.length;
 for(i=0;i<num;i++){
  elem = links[i];
  if(elem.getAttribute('title')==null || elem.getAttribute('title')==''){
   
  }
  else{
   title = elem.getAttribute('title');
   elem.setAttribute('onmouseover','tt(this,"'+title+'")');
   elem.removeAttribute('title');
  }
 }
}

window.onload=function(){implementtt();}

function tt(x,y){
 $('#tt').show();
 $('#tt').html(y);
 $(x).mousemove(function(e){
  Px = e.pageX;
  Py = e.pageY;
  d('tt').setAttribute('style','position:absolute;top:'+Py+';left:'+Px+';');
 });
 $(x).hover(function(){},function(){$('#tt').hide();})
}
</script>

add some style to your tooltip : ( used some css3 )

<style>
#tt{
position:absolute;
background:rgb(50,50,50);
color:rgb(255,255,255);
opacity:0.8;
-moz-border-radius:5px 0px 5px 0px;-webkit-border-top-right-radius:5px 0px 5px 0px;-khtml-border-radius:5px 0px 5px 0px;
padding:5px;
margin-top:15px;
margin-left:15px;
font:9px verdana;
z-index:99;
}
</style>

and finally, add the tooltip container to your page :

<span id='tt'style='display:none;'></span>

and there you go. All the link title(s) of your page would be transformed into a beautiful,easy to customize tooltip. You can add images and more..

Click here for demo