tooltips help

Question

public-image 0 Junior Poster in Training

12 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
151 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by public-image

All 16 Replies

aquilax 7 Junior Poster in Training

12 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

12 Years Ago

Can you provide URL?

aquilax 7 Junior Poster in Training

12 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

12 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

12 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

12 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

12 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

tooltips help

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers