I have a great tooltip script. My only problem is that when the tooltip gets too long, it goes right upwards but doesn't stop. So if you imagine your browser, it'll go BEHIND where the tabs are / address bar / etc. It doesn't stop at the top of the page.


This is the script:

<SCRIPT type="text/javascript">
var six=2; 
var sev=20; 
var bg='white'; 
var eig=document.all;
var nin=document.getElementById && !document.all;
var ten=false;

if (eig||nin)var fir=document.all? document.all["tooltip"] : document.getElementById? document.getElementById("tooltip") : "";

	function sec(){
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
	}

	function tiptext(fou){
		if (nin||eig){
			if (typeof fif=="undefined") fir.style.backgroundColor=bg;fir.innerHTML=fou;ten=true;return false;
			}
		}

	function tooltip3(e){
	
		if (ten){
		var six3=(nin)?e.pageX : event.x+sec().scrollLeft;var sev3=(nin)?e.pageY : event.y+sec().scrollTop;var eig3=eig&&!window.opera? sec().clientWidth-event.clientX-six : window.innerWidth-e.clientX-six-20;var nin3=eig&&!window.opera? sec().clientHeight-event.clientY-sev : window.innerHeight-e.clientY-sev-20;var ten3=(six<0)? six*(-1) : -960;
		
		if (eig3<fir.offsetWidth)fir.style.left=eig? sec().scrollLeft+event.clientX-fir.offsetWidth+"px" : window.pageXOffset+e.clientX-fir.offsetWidth+"px";
		else if (six3<ten3)fir.style.left="5px";else fir.style.left=six3+six+"px";

		if (nin3<fir.offsetHeight)fir.style.top=eig? sec().scrollTop+event.clientY-fir.offsetHeight-sev+"px" : window.pageYOffset+e.clientY-fir.offsetHeight-sev+"px";else fir.style.top=sev3+sev+"px";fir.style.visibility="visible";}}

	function closetip(){
		if (nin||eig){
		ten=false;fir.style.visibility="hidden";fir.style.left="-1000px";fir.style.backgroundColor='';fir.style.width='';
		}
	}
	document.onmousemove=tooltip3;
</script>

Then on the page itself:

<style type="text/css">
#tooltip {position: absolute;border: 2px solid black;padding: 2px;visibility: hidden;z-index: 99;width:280px;}
</style>

<div id="tooltip"></div>

<a href="#"><img src="images/layout/icons/help.gif" alt="Forgotten Email Address?" onMouseover="tiptext('Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>Hello<br><br>');" onMouseout="closetip()"></a>

Unfortunately, I'm terrible with Javascript, is there a way that it can tell where the top of the page is and stop there?

Many thanks in advance

Change the last line in tooltip3 function from this

         if (nin3<fir.offsetHeight)fir.style.top=eig? sec().scrollTop+event.clientY-fir.offsetHeight-sev+"px" : window.pageYOffset+e.clientY-fir.offsetHeight-sev+"px";else fir.style.top=sev3+sev+"px";fir.style.visibility="visible";}}

to this:

        if (nin3<fir.offsetHeight)fir.style.top=eig? sec().scrollTop+event.clientY-fir.offsetHeight-sev+"px" : window.pageYOffset+e.clientY-fir.offsetHeight-sev+"px";else fir.style.top=sev3+sev+"px";fir.style.visibility="visible";}
if (parseInt(fir.style.top)<0)fir.style.top="0px;"}

Great so far! Thank you.
My only complaint is that it only works in FireFox. Anyway to get it to stop at the top in IE too?

Originally Posted by Petsmacker

Great so far! Thank you.
My only complaint is that it only works in FireFox. Anyway to get it to stop at the top in IE too?

It should work in both. Have you tried clearing your IE cache?