inghfs
asked on
Web Site Tool Tip Text
I have the following Tool Tip Text code which I have copied from a freeware site It seems work okay until you start to scroll down the web page, and for some reason the tool tip text appears half way up the page until eventually it disappears off the top of the browser. Can anyway tell me why this is happening and a possible solution.
Many Thanks
<html>
<head>
<style type="text/css">
<!--
.tooltiptitle{COLOR: #FFFFFF; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-weight: bold; font-size: 8pt}
.tooltipcontent{COLOR: #000000; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-size: 8pt}
#ToolTip{position:absolute ; width: 100px; top: 0px; left: 0px; z-index:4; visibility:hidden;}
-->
</style>
<script language = "javascript">
<!--
ContentInfo = "";
topColor = "#808080"
subColor = "#C0C0C0"
var mouse_X;
var mouse_Y;
var tip_active = 0;
function update_tip_pos(){
document.getElementById('T oolTip').s tyle.left = mouse_X + 20;
document.getElementById('T oolTip').s tyle.top = mouse_Y;
}
var ie = document.all?true:false;
if (!ie) document.captureEvents(Eve nt.MOUSEMO VE)
document.onmousemove = getMouseXY;
function getMouseXY(e) {
if (ie) { // grab the x-y pos.s if browser is IE
mouse_X = event.clientX + document.body.scrollLeft;
mouse_Y = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
mouse_X = e.pageX;
mouse_Y = e.pageY;
}
if (mouse_X < 0){mouse_X = 0;}
if (mouse_Y < 0){mouse_Y = 0;}
if(tip_active){update_tip_ pos();}
}
function EnterContent(TTitle, TContent){
ContentInfo = '<table border="0" width="100" cellspacing="0" cellpadding="0">'+
'<tr><td width="100%" bgcolor="#000000">'+
'<table border="0" width="100%" cellspacing="1" cellpadding="0">'+
'<tr><td width="100%" bgcolor='+topColor+'>'+
'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltiptitle">  ;'+TTitle+ '</font>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'<tr><td width="100%" bgcolor='+subColor+'>'+
'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltipcontent">'+T Content+'< /font>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'</table>';
}
function tip_it(which, TTitle, TContent){
if(which){
update_tip_pos();
tip_active = 1;
document.getElementById('T oolTip').s tyle.visib ility = "visible";
EnterContent(TTitle, TContent);
document.getElementById('T oolTip').i nnerHTML = ContentInfo;
}else{
tip_active = 0;
document.getElementById('T oolTip').s tyle.visib ility = "hidden";
}
}
//-->
</script>
</head>
<body>
<div id="ToolTip"></div>
<a class="NArial" href="javascript:void(0)" onMouseover="tip_it(1,'Too ltip Title','Tooltip Content');" onMouseout="tip_it(0, '', '')">Mouse Over Me!</a><br>
</body>
</html>
Many Thanks
<html>
<head>
<style type="text/css">
<!--
.tooltiptitle{COLOR: #FFFFFF; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-weight: bold; font-size: 8pt}
.tooltipcontent{COLOR: #000000; TEXT-DECORATION: none; CURSOR: Default; font-family: arial; font-size: 8pt}
#ToolTip{position:absolute
-->
</style>
<script language = "javascript">
<!--
ContentInfo = "";
topColor = "#808080"
subColor = "#C0C0C0"
var mouse_X;
var mouse_Y;
var tip_active = 0;
function update_tip_pos(){
document.getElementById('T
document.getElementById('T
}
var ie = document.all?true:false;
if (!ie) document.captureEvents(Eve
document.onmousemove = getMouseXY;
function getMouseXY(e) {
if (ie) { // grab the x-y pos.s if browser is IE
mouse_X = event.clientX + document.body.scrollLeft;
mouse_Y = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
mouse_X = e.pageX;
mouse_Y = e.pageY;
}
if (mouse_X < 0){mouse_X = 0;}
if (mouse_Y < 0){mouse_Y = 0;}
if(tip_active){update_tip_
}
function EnterContent(TTitle, TContent){
ContentInfo = '<table border="0" width="100" cellspacing="0" cellpadding="0">'+
'<tr><td width="100%" bgcolor="#000000">'+
'<table border="0" width="100%" cellspacing="1" cellpadding="0">'+
'<tr><td width="100%" bgcolor='+topColor+'>'+
'<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltiptitle"> 
'</td></tr>'+
'</table>'+
'</td></tr>'+
'<tr><td width="100%" bgcolor='+subColor+'>'+
'<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+
'<tr><td width="100%">'+
'<font class="tooltipcontent">'+T
'</td></tr>'+
'</table>'+
'</td></tr>'+
'</table>'+
'</td></tr>'+
'</table>';
}
function tip_it(which, TTitle, TContent){
if(which){
update_tip_pos();
tip_active = 1;
document.getElementById('T
EnterContent(TTitle, TContent);
document.getElementById('T
}else{
tip_active = 0;
document.getElementById('T
}
}
//-->
</script>
</head>
<body>
<div id="ToolTip"></div>
<a class="NArial" href="javascript:void(0)" onMouseover="tip_it(1,'Too
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Why are you looking for something more complex?
The question is what functionality are you looking for?
The question is what functionality are you looking for?
ASKER