JS/Ajax div tooltip. kinda...

[jamiller]

After searching the internet for almost all day today I am finally going to ask for some help.

I have a text link that once the user clicks on it a div will appear via CSS visibility just above the link. This is what I have now. I just need a better function for determining the mouse position:


function labPop(divid) {
var epos = window.event;
document.getElementById(divid).style.visibility = 'visible';
document.getElementById(divid).style.left = epos.clientX;
document.getElementById(divid).style.top = epos.clientY;
}

Thanks for any and all help!

[jscheuer1]

The code (for finding the mouse position) that you have looks good for IE as long as the page hasn't been scrolled. Here is a link to some code that works in most browsers, incliding IE:

http://www.quirksmode.org/js/events_properties.html#position

You could use it like so:


function labPop(divid, e) {

var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
document.getElementById(divid).style.visibility = 'visible';
document.getElementById(divid).style.left = posx+'px';
document.getElementById(divid).style.top = posy+'px';
}

I've added the literal 'px' units as, many browsers require them. Your onclick attribute for your text could look like something so:


<span onclick="labPop('lab_div1', event);">Click Me</span>

The event keyword should appear just as I have written it. It shouldn't be quoted or replaced by anything else. The 'lab_div1' represents the unique id you want to pass to the function and should be quoted as shown.

[jamiller]

You. My man. ****ing rock!! Thanks so much!