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_....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!