Light weight tooltip using CSS and Javascript

Some time back i was in need on some tooltip functionality, After surfing internet , i have finally worte some cosolidated code for it . I thought it can help you in some way.

Output :

tooltip.html Code

<html >

<head runat=”server”>

<title>Untitled Page</title>

<script type=”text/javascript” src=”ToolTip.js” ></script>

<style type=”text/css”>

.toolTipDiv

{

background-color:Silver;

border: 2px;

border-color: Gray;

color: Yellow;

font-size:medium;

font-weight:bold;

}

</style>

</head>

<body>

<form id=”form1″ runat=”server”>

<div >

<a onmouseover=”ShowTip(’13 May 2010′, ‘2Days’,’Dilip Singh’,150 );” onmouseout=”HideTip();” style=”color:Green;”>

mouse over on me to see the tooltip working !!

</a>

</div>

</form>

</body>

</html>

Tooltip.js Code

function ShowTip(changedOn, SameFor,ChangedBy,w)

{

var title= ‘<div class =”toolTipDiv” >’+ ‘Changed On: ‘+changedOn +'<br/>’+’Same For: ‘+ SameFor+’ Days<br/>’ +’Changed By: ‘+ChangedBy+'</Div>’;

tooltip.show(title, 300);

}

function HideTip()

{

tooltip.hide();

}

var tooltip=function(){

var id = ‘tt’;

var top = 3;

var left = 3;

var maxw = 300;

var speed = 40;

var timer = 20;

var endalpha = 95;

var alpha = 0;

var tt,t,c,b,h;

var ie = document.all ? true : false;

return{

show:function(v,w){

if(tt == null){

tt = document.createElement(‘div’);

tt.setAttribute(‘id’,id);

t = document.createElement(‘div’);

t.setAttribute(‘id’,id + ‘top’);

c = document.createElement(‘div’);

c.setAttribute(‘id’,id + ‘cont’);

b = document.createElement(‘div’);

b.setAttribute(‘id’,id + ‘bot’);

tt.appendChild(t);

tt.appendChild(c);

tt.appendChild(b);

document.body.appendChild(tt);

tt.style.opacity = 0;

tt.style.filter = ‘alpha(opacity=0)’;

document.onmousemove = this.pos;

}

tt.style.display = ‘block’;

c.innerHTML = v;

tt.style.width = w ? w + ‘px’ : ‘auto’;

if(!w && ie){

t.style.display = ‘none’;

b.style.display = ‘none’;

tt.style.width = tt.offsetWidth;

t.style.display = ‘block’;

b.style.display = ‘block’;

}

if(tt.offsetWidth > maxw){tt.style.width = maxw + ‘px’}

h = parseInt(tt.offsetHeight) + top;

clearInterval(tt.timer);

tt.timer = setInterval(function(){tooltip.fade(1)},timer);

},

pos:function(e){

var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;

var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;

tt.style.top = (u – h) + ‘px’;

tt.style.left = (l + left) + ‘px’;

},

fade:function(d){

var a = alpha;

if((a != endalpha && d == 1) || (a != 0 && d == -1)){

var i = speed;

if(endalpha – a < speed && d == 1){

i = endalpha – a;

}else if(alpha < speed && d == -1){

i = a;

}

alpha = a + (i * d);

tt.style.opacity = alpha * .01;

tt.style.filter = ‘alpha(opacity=’ + alpha + ‘)’;

}else{

clearInterval(tt.timer);

if(d == -1){tt.style.display = ‘none’}

}

},

hide:function(){

clearInterval(tt.timer);

tt.timer = setInterval(function(){tooltip.fade(-1)},timer);

}

};

}();

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s