Javascript and css used for simple tooltip

The following code will generate the simple tooltip using Javascript and css.

The Javascript code :

<script language=”javascript” type=”text/javascript”>

/* This tooltip library was created by Anil Kumar */

function showtip(e,message){var x=0;var y=0;var m;var h;if(!e)


var e=window.event;if(e.pageX||e.pageY){x=e.pageX;y=e.pageY;}

else if(e.clientX||e.clientY){x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}

m=document.getElementById(’mktipmsg’);if((y>10)&&(y<450)){m.style.top=y-4+”px”;}

else{m.style.top=y+4+”px”;}


var messageHeigth=(message.length/20)*10+25;if((e.clientY+messageHeigth)>510)

{m.style.top=y-messageHeigth+”px”;}

if(x<850){m.style.left=x+20+”px”;}

else{m.style.left=x-170+”px”;}

m.innerHTML=message;m.style.display=”block”;m.style.zIndex=203;}


function hidetip(){var m;m=document.getElementById(’mktipmsg’);m.style.display=”none”;}

</script>

The CSS Code:

<style type=”text/css”>

.mktipmsg {padding: 5px; background-color: #FFF8DC; border: 1px solid #DEB887; width:180px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }

</style>

The html Code :

<a href=”javascript:void(0)” onmouseover=”showtip(event, ‘Simple tooltip text’);”

onmouseout=”hidetip();”>Hover your mouse here to see simple tooltip text.</a><br>

<div id=”mktipmsg” ></div>