Log in

View Full Version : Tool Tip Problem on Scrolling


ir_thom
05-07-2009, 11:07 AM
I am using Javascript to create tooltips. When I used the mouse wheel to scroll down the page the tooltips would go up vertically and were not placed next to cursor. This happened in IE8 and FF but did not happen in Chrome. I did a little bit of Googling and as a result changed the position: absolute; to position: fixed; This solved the problem in IE8 and FF, but now the problem appears in Chrome. This is the JS used for the tooltip:


style>
<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 0px;
font-size: 10px;
border: black solid 3px;
font-family: arial;
position: absolute;
background-color: #000000;
color: #FFFFFF;
}
-->
</style>
<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */

var theObj="";

function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}

Does Chrome deal with positioning differently? Any help would be greatly appreciated.
vwphillips
05-07-2009, 11:56 AM
see
http://209.188.89.109/showthread.php?p=814038#post814038

the tooltip script is not X browser I have posted X browser modifications quite recently, I thought it was for you


tested


<html>

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
img.c3 {border: none;}
h1.c2 {text-align: center}
div.c1 {text-align: center}
/*]]>*/
</style>
<style type="text/css">
<!--
#toolTipBox {
display: none;
padding: 0px;
font-size: 10px;
border: black solid 3px;
font-family: arial;
position: absolute;
background-color: #000000;
color: #FFFFFF;
}
-->
</style>
<script language="JavaScript" type="text/javascript">

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Saul Salvatierra :: http://myarea.com.sapo.pt
with help from Ultimater :: http://ultimiacian.tripod.com */

var theObj="";

function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}

function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=zxcMse(ev)[0];
var y=zxcMse(ev)[1];
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+zxcWWHS()[3]+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+zxcWWHS()[2]+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}

function zxcMse(e){
if (!document.all){ return [e.clientX+zxcDocS()[0],e.clientY+zxcDocS()[1]] }
else { return [event.clientX,event.clientY]; }
}

function zxcDocS(){
if (!document.body.scrollTop){ return [document.documentElement.scrollLeft,document.documentElement.scrollTop]; }
else { return [document.body.scrollLeft,zxcsy=document.body.scrollTop]; }
}

</script>
<head>

<body>
<div style="height:500px;"></div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" onmouseover="toolTip('text',this)"/>
<div id="toolTipBox" ></div>

</body>

</html>