event not recognized when passed from setTimeout()

Hi all

I have a tooltip that apperas onmouseover event as under

<a onmouseover="showToolTip('123456',event);" href="#">link</a>

Code (markup):

if I put an alert(event); in showToolTip(), it prints [Object MouseEvent]

but if I put showToolTip() function in setTimeout() for a little delay, it prints just event.

<a onmouseover="mytimeout=setTimeout(function() {showToolTip('46456546',event);}, 500);" onmouseout="clearTimeout(mytimeout);" href="#">link</a>

Code (markup):

because of this problem, the tooltip doesnt move, as it cant find xPos and yPos that I derive out of event

The script is as under:

var xPos;
var yPos;

function showToolTip(title,evt){
alert(evt);
 if (evt) {
 var url = evt.target;
 }
 else {
 evt = window.event;
 var url = evt.srcElement;
 }
 xPos = evt.clientX;
 yPos = evt.clientY;

 var toolTip = document.getElementById("toolTip");
 toolTip.innerHTML = "<h1>"+title+"</h1><p>"+"rakesh gupta"+"</p>";
 toolTip.style.top = parseInt(yPos)+2 + "px";
 toolTip.style.left = parseInt(xPos)+2 + "px";
 toolTip.style.visibility = "visible";

}
function hideToolTip(){
 var toolTip = document.getElementById("toolTip");
 toolTip.style.visibility = "hidden";
}

Code (markup):

please help me with this, its urgent.

 

After the time (in the timeout) has passed, the event object has changed. If you need the X and Y coordinates, pass those to the showToolTip() function instead:

<a onmouseover="mytimeout=setTimeout(function() {showToolTip('46456546',event.clientX,event.clientY);}, 500);" onmouseout="clearTimeout(mytimeout);" href="#">link</a>

Code (markup):

Then change your showToolTip() function to the following:

function showToolTip(title,xPos,yPos){
 var toolTip = document.getElementById("toolTip");
 toolTip.innerHTML = "<h1>"+title+"</h1><p>"+"rakesh gupta"+"</p>";
 toolTip.style.top = parseInt(yPos)+2 + "px";
 toolTip.style.left = parseInt(xPos)+2 + "px";
 toolTip.style.visibility = "visible";
}

Code (markup):