Display/Positioning Tooltips

[ShadowMage]

Hey guys, I've got a question. I'm using a script that one of my predecessors wrote (it's kind of old code) to display tooltips and I'm having some issues with positioning them in IE. Here's the full script:

function findWidth(obj) {	if(obj.clientWidth) {		//alert(obj.clientWidth);		return obj.clientWidth;	} else {		if(obj.offsetWidth) {			//alert(obj.offsetWidth);			return obj.offsetWidth;		}	}}function findHeight(obj) {	if(obj.clientHeight) {		//alert("a" + obj.clientHeight);		return obj.clientHeight;	} else {		if(obj.offsetHeight) {			//alert("b" + obj.offsetHeight);			return obj.offsetHeight;		}	}}function findPosX(obj) {	var curleft = 0;	if (obj.offsetParent) {		while (obj.offsetParent) {			curleft += obj.offsetLeft			obj = obj.offsetParent;		}	}	else if (obj.x)		curleft += obj.x;	return curleft;}function findPosY(obj) {	var curtop = 0;	if (obj.offsetParent) {		while (obj.offsetParent) {			curtop += obj.offsetTop			obj = obj.offsetParent;		}	}	else if (obj.y)		curtop += obj.y;	return curtop;}function popup(tip_id, obj_id) {	var obj = document.getElementById(obj_id);	var tip = document.getElementById(tip_id);	var newx, newy;		newx = findPosX(obj) + "px";	newy = ( findPosY(obj) - findHeight(tip) - 5 ) + "px";		if ( tip.style.visibility == 'visible' ) {		tip.style.visibility = 'hidden';	} else {		tip.style.left = newx;		tip.style.top = newy;		tip.style.visibility = 'visible';	}}function tip_newx(obj, tip, locx, locxpos) {	// given an object, the tip (popup), x offset and	//    x position, return the new x pos for the tip	tip_width = findWidth(tip);	newx = findPosX(obj) + locx;	if ( locxpos == 'center' ) {		newx = (newx - (tip_width / 2));	} else if ( locxpos == 'right' ) {		newx = (newx - tip_width);	}	// make sure the entire tip is on the screen	winW = ( window.innerWidth ) ? window.innerWidth + window.pageXOffset : document.body.offsetWidth;	if ( newx > (winW - tip_width) )		newx =  winW - tip_width;	newx = newx + "px";	return newx;}function tip_newy(obj, tip, locy, locypos) {	// given an object, the tip (popup), y offset and	//    y position, return the new y pos for the tip	tip_height = findHeight(tip);	newy = findPosY(obj) + locy;	if ( locypos == 'middle' ) {		newy = (newy - (tip_height / 2));	} else if ( locypos == 'bottom' ) {		newy = (newy - tip_height);	}	// make sure the entire tip is on the screen	winH = ( window.innerHeight ) ? window.innerHeight + window.pageYOffset : document.body.offsetHeight;	if ( newy > (winH - tip_height) )		newy =  winH - tip_height;	newy = newy + "px";	return newy;}function tip_show(tip_id, obj_id, locy, locypos, locx, locxpos) {	var tip = document.getElementById(tip_id);	var obj = document.getElementById(obj_id);		if ( locx )		tip.style.left = tip_newx(obj, tip, locx, locxpos);	if ( locy )		tip.style.top = tip_newy(obj, tip, locy, locypos);			tip.style.visibility = 'visible';}function tip_hide(tip_id) {	var tip = document.getElementById(tip_id);	tip.style.visibility = 'hidden';}function toggle_tip(tip_id, obj_id, locy, locypos, locx, locxpos) {	var tip = document.getElementById(tip_id);		if ( tip.style.visibility == 'visible' ) {		tip.style.visibility = 'hidden';	} else {		var obj = document.getElementById(obj_id);				if ( locx )			tip.style.left = tip_newx(obj, tip, locx, locxpos);		if ( locy )			tip.style.top = tip_newy(obj, tip, locy, locypos);				tip.style.visibility = 'visible';	}}function toggle_visibility(obj_id) {	var obj = document.getElementById(obj_id);		if ( obj.style.visibility == 'visible' ) {		obj.style.visibility = 'hidden';	} else {		obj.style.visibility = 'visible';	}}

The issue is that sometimes it displays in the correct spot sometimes it doesn't. When I turn on compatibility view, it fixes some but breaks others. :)For instance,<a id="security_report" href="java script:toggle_tip('div_security_filter','security_report',16,'top',25,'left');">Security Reports</a>shows it way up at the top of the screen when it should be about 3/4 down the page. Turning compatibility view on fixes it.document.getElementById("CalcsHdr").onclick = function() { toggle_tip('calcs_menu','CalcsHdr',8,'top',-145,'left'); }shows it correctly when compatibility view is off, but displays it a good distance to the right with compatibility view on.I know the handlers are being assigned differently (the second one is also on a <td> instead of an <a>) but I tried the first one using a span and setting the handler in script the same way I do with the second one, but I still get the same result.Can anybody tell me what's going on here?

[justsomeguy]

The findPosX and findPosY functions are probably responsible, do some debugging with those to check the values they're using in the different modes. The value for offsetParent might be different or gone, for example.

[ShadowMage]

Ok, so I added alerts to the findPosY as follows:

function findPosY(obj) {	var curtop = 0;	if (obj.offsetParent) {		alert(obj+"\n"+obj.offsetParent+"  ==> "+obj.offsetParent.nodeName);		while (obj.offsetParent) {			curtop += obj.offsetTop			obj = obj.offsetParent;			if (obj.offsetParent) {				alert(obj+"  ==> "+obj.nodeName+"\n"+obj.offsetParent+"  ==> "+obj.offsetParent.nodeName+"\n"+curtop);			} else {				alert(obj+"  ==> "+obj.nodeName+"\n"+obj.offsetParent+"\n"+curtop);			}		}	}	else if (obj.y)		curtop += obj.y;	return curtop;}

The first alert shows obj equal to the function call and the parent being equal to an HTMLElement (the body tag). The second alert shows obj equal to the body tag and the offsetParent is null. curtop at this point is set to 478. It doesn't appear that anything is wrong here, does it? Yet it still shows the tooltip way up at the top of the screen. Am I missing something?

[ShadowMage]

Well, found the problem, just not sure how to fix it. The issue is with the following line:winH = ( window.innerHeight ) ? window.innerHeight + window.pageYOffset : document.body.offsetHeight;Seems innerHeight is only defined in FF (which contains the correct value in firefox). How then, do I get the window's height in IE?

[justsomeguy]

Check here:http://www.howtocreate.co.uk/tutorials/jav...t/browserwindow

[ShadowMage]

Fantastic! Thanks, jsg. The solution is document.documentElement.clientHeight