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…)