...

View Full Version : Tool Tips Code Help



jdblewitt
05-15-2009, 02:54 AM
Hello,

Not too sure on what to do here. I don't know much of anything about java. I downloaded a tool tips script to implement on my site.

This is how it is embedded in the site...

<span class="hotspot" onmouseover="tooltip.show('this is what will display in tool tips')" onmouseout="tooltip.hide();">test</span>

What I want to do is create a separate file (or maybe just include in the same file) a list of the terms I want and their definitions. For example, I would list...

Term 1 = The definition for terms 1
Term 2 = The definition for terms 2
Term 3 = The definition for terms 3
etc.....

I like to be organized this way as the terms I want the tool tips to be used for will have lengthly explanations and used quite often, so it would be nice to just call on them in the code instead of repeating the full definition throughout the site. My problem is anything I put between the 's after tooltip.show( displays. How would I call on variables inside the 's?
here is the entire script....Thanks!

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
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);
}
};
}();

jmrker
05-15-2009, 05:08 AM
You didn't include the entire script because I'm just guessing as to what the
hotspot class is defined to be doing. I put in a guess, but will probably need
to be replaced with the correct actions.

The 'Terms' array could be longer and referenced as an external JS file.
Notice the first element is blank for a reason ... so you could reference
the correct display with the numbering system that you started with.
Most arrays are zero based rather than starting at element one.

Note also, this is the Javascript forum and not the Java forum.
None of the code you provided was java.

How close is this to what you want to do?


<html>
<head>
<title>Tooltips</title>
<style type="text/css">
.hotspot {
background-color:yellow;
color:blue;
font-weight:bold;
}
</style>

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=166372

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
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);
}
};
}();
</script>

<script type="text/javascript">
// following could be in an external JS file
var Terms = ['',
'Term 1 = The definition for terms 1',
'Term 2 = The definition for terms 2',
'Term 3 = The definition for terms 3'
];

</script>
</head>
<body>
Some information with a
<span class="hotspot"
onmouseover="tooltip.show('this is what will display in tool tips')"
onmouseout="tooltip.hide();">test</span>
... followed by more information ...
<span class="hotspot" onmouseover="tooltip.show(Terms[1])" onmouseout="tooltip.hide();">Term 1</span><br>
... followed by even more information ...
<span class="hotspot" onmouseover="tooltip.show(Terms[2])" onmouseout="tooltip.hide();">Term 2</span>
... followed by even lots' more information ...
<span class="hotspot" onmouseover="tooltip.show(Terms[3])" onmouseout="tooltip.hide();">Term 3</span>
... until done.
</body>
</html>


Also, remember to put you code between [ code] and [ /code] (without the spaces) tags to make it easier to read on the forum.
:thumbsup:

jdblewitt
05-15-2009, 05:25 AM
Thanks, sorry for the mistakes. You got the idea.

jdblewitt
05-15-2009, 06:08 AM
Thanks so much, that works great!

jmrker
05-15-2009, 01:02 PM
You're most welcome.
Glad I could help.

Now, how about putting up the CSS so that other could use it as well?

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum