Tooltips styling issue - php

Question

Hi I'm using tooltips on my site to give links and certain images hints/descriptions. I wanted for my tooltips to be able to have different styles. I pass this variable into the JS file and the code does work to an extent..
The error I am receiving is: The first rollover I make sets the style for all other rollovers, even those that are sending a variable for a different style..
Mouseover HTML
(text, size, style) - this is an example of two different onmouseovers sending a diff style
onmouseover="tooltip.show('About Us', 89,'cont1');"
onmouseover="tooltip.show('Archive', 89,'cont2');"
JS
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 40;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h, no;
var ie = document.all ? true : false;
return{
show:function(v,w,no){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id + no);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'text');
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);
}
};
}();

Answer 1

If I follow your code, it looks like your handing in style and using it as part of the name of the ID for the div your creating for the tool tip (I'm assuming your styling things based on ID name). If this is all true, it looks like your issue is that after the first tooltip is created (when tt == null at the top of your show function) you never change the ID of the tool tip after that. The ID only updates on create, so the style will not change once its created.
of course I could be completely wrong about this (I am after all out of coffee at this moment...)

Answer 2

Sorry for not actually answering your question, but you shouldn't invent the wheel. There're SO many libraries out there, that does the exact same thing. Here is 50 to get you started.