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?
Code:
<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.
Before you post, read our: 
How close is this ...
