tooltips help

Question

public-image 0 Junior Poster in Training

13 Years Ago

Hi there!

I have tooltips on my site that appear when you hover over text/image but i would like different background for different hovers. the code at the moment accepts all variables passed in but doesnt initalise and apply the styles.

I have attached my code and would be thankful for any help I receive:

HTML

<a MouseOver="tooltip.show('About Us', 89, 'cont1');">text</a>

CSS

#ttcont {
 display:block;
 background: url(imgs/bars/3.png) top right no-repeat;
}
 #ttcont2 {
 display:block;
 background: url(imgs/bars/2.png) top right no-repeat;
}
#ttcont3 {
 display:block;
 background: url(imgs/bars/1.png) top right no-repeat;
}

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);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + no);
    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);
  }
 };
}();

Thank you in advance!

javascript

2 Contributors
16 Replies
152 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by public-image

aquilax 7 Junior Poster in Training

13 Years Ago

I'm not sure if I understood you correctly, but you can try this example:

<head>
<style>
 #ttcont {
 display:block;
 background: url(imgs/bars/3.png) top right no-repeat;
}
 #ttcont2 {
 display:block;
 background: url(imgs/bars/2.png) top right no-repeat;
}
#ttcont3 {
 display:block;
 background: url(imgs/bars/1.png) top right no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript">
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 + no);
    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);
  }
 };
}();
</script>

<a href="#" onmouseover="tooltip.show('About Us', 89, 'cont1');">text</a>
</body>

aquilax 7 Junior Poster in Training

13 Years Ago

Can you provide URL?

aquilax 7 Junior Poster in Training

13 Years Ago

It shows 500 Internal Server Erorr now but from what I saw, You're not passing the third paramether to the show method, which should set the id name, as in here:

tooltip.show('About Us', 89, 'cont1')

aquilax 7 Junior Poster in Training

13 Years Ago

ttcont2 is repeated twice, That's why the background is doubled:

<div id="ttcont2" style="opacity: 0.95; display: block; width: 89px; top: 491px; left: 84px;">
<div id="tttop"></div>
<div id="ttcont2">Daily Gopher</div>
<div id="ttbot"></div></div>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

public-image 0 Junior Poster in Training · Answer 1 · 2011-07-14T05:38:35+00:00

public-image 0 Junior Poster in Training

13 Years Ago

Bump - Still requiring assistance with this.

public-image 0 Junior Poster in Training · Answer 2 · 2011-07-14T16:58:15+00:00

The tooltip is showing, as it was doing in my own code but it still is not displaying correctly (no background).

public-image 0 Junior Poster in Training · Answer 3 · 2011-07-14T17:32:38+00:00

public-image 0 Junior Poster in Training

13 Years Ago

URL Provided.

public-image 0 Junior Poster in Training · Answer 4 · 2011-07-14T17:47:37+00:00

Okay so it is showing the styles now.. but it will only ever show the first style that you rollover, so if a style is different for another rollover it doesn't change it.

Also my rollover backgrounds are doubling.. I have a no-repeat for the background images in my css and so I know it cannot be that.

public-image 0 Junior Poster in Training · Answer 5 · 2011-07-14T18:06:14+00:00

Those divs are created via JS I'm not really much of a Javascript person, you may have noticed :P - I can do the basics, get stuff by ID and make vars.
Can you tell me what I would perhaps remove and would you know why it only styles by the first rollover?

aquilax 7 Junior Poster in Training · Answer 6 · 2011-07-14T18:12:28+00:00

Here is the portion of the code:

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 + no);
    b = document.createElement('div');

This tt.setAttribute('id',id + no); and this c.setAttribute('id',id + no); set the ID for the divs.

I suggest you change: c.setAttribute('id',id + no); to c.setAttribute('id',id + no + 'text');

aquilax 7 Junior Poster in Training · Answer 7 · 2011-07-14T19:02:16+00:00

Change c.setAttribute('id',id + no); TO c.setAttribute('id',id + no + 'text');

public-image 0 Junior Poster in Training · Answer 8 · 2011-07-14T19:07:59+00:00

I did and that worked although now the only problem is it uses the same style for each rollover regardless of sending a different style. - It will set the same style for every rollover ONLY after the first rollover is made.

aquilax 7 Junior Poster in Training · Answer 9 · 2011-07-14T19:34:04+00:00

I see now. Ok this is my first example modified to change the background:

<head>
<style>
 .cont1 {background-color:red;}
 .cont2 {background-color:green;}
</style>
</head>
<body>
<script type="text/javascript">
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);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id);
    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.setAttribute('class', no);
   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);
  }
 };
}();
</script>

<a href="#" onmouseover="tooltip.show('About Us', 89, 'cont1');">text</a>

<a href="#" onmouseover="tooltip.show('About You', 89, 'cont2');">text2</a>
</body>

public-image 0 Junior Poster in Training · Answer 10 · 2011-07-14T19:39:30+00:00

public-image 0 Junior Poster in Training

13 Years Ago

Tried that, doesn't show any background now.. :)

aquilax 7 Junior Poster in Training · Answer 11 · 2011-07-14T19:41:25+00:00

Notice the CSS it changes the class rather than the id;

<style>
 .cont1 {background-color:red;}
 .cont2 {background-color:green;}
</style>

public-image 0 Junior Poster in Training · Answer 12 · 2011-07-14T19:58:06+00:00

Still no success with that but I added in the style. Although if it fixes it then I'd be more than happy to go for that route