Tool Tip Problem on Scrolling

[irthom]

I am using Javascript to create tooltips. When I use the mouse wheel to scroll down the page the tooltips go up vertically and are not placed next to cursor. This happens in IE8 and FF but does not happen in Chrome. Is there any way to fix this so the tootips are in a consistent position across all browsers?

 

This is the code:

 

<script type="text/javascript">

<!--

 

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";

}

//-->

</script>

 

The site is here:

 

http://www.eyethomson.com/test_wallpaper/wallpaper/wallpaper_index.html

 

Many thanks for any help.

[Ken2k7]

Why do that? Just get the cursor's position. Does that not work?

[irthom]

I'm afraid that I'm something of a newbie when it comes to JS. If there is a more simple way to do it I would be delighted.  Could you explain how to attach it to the cursor position?

 

Many thanks. 

[Ken2k7]

Learn to Google.

 

I don't mean to be not helpful, but that is very useful advice.

[irthom]

I have spent the last five hours trying to sort this problem out and have tried different Google options that have come to nothing.  I would be really grateful if you could give me a few pointers.  I apologise if I am coming across as dense, but I m learning as I go and just require a little bit of guidance.

[Ken2k7]

Google "JavaScript cursor position". That should help.

[irthom]

I'm really sorry.  I have done some Googling and reading, but I just don't understand what your getting at in relation to this.  this is the tooltip code:

 

</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";
}

 

Can you possibly expain how the cursor position issue relates to this?  I'm really learning as I go here, my apologies.

[Ken2k7]

The cursor position isn't an issue. I'm suggesting that you should use it to position your toolTipBox. See where you styled the placement of your box in updatePos()? Well, if you change those top and left to the y position of the cursor and the x position of the cursor on the page, then you got the right positioning.

 

Of course, you may want to add a few pixels here and there so it's not directly beneath the cursor.

[irthom]

Hi,

 

I changed the px values in the code below:

 

 document.getElementById('toolTipBox').style.top  = y-2+diffY+document.body.scrollTop+ "px";
  document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";

 

but it just resulted in the tooltip disappearing.  I think that I may not have understood you correctly.  waht aspect of the following code should be amended:

 

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;

 

Thank you for your patience.

[Ken2k7]

Oh wait, I forgot something. Stupid me. Set the toolTipBox to position fixed. Would that help?

[irthom]

I changed it to fixed and the problem is solved!  Thank you so much for taking the time to help me with this.