# Javascript ToolTip Problem in IE

**URL:** <https://forum.kirupa.com/t/javascript-tooltip-problem-in-ie/211089>\
**Category:** web dev\
**Created:** [December 27, 2006, 2:34am UTC](https://forum.kirupa.com/t/javascript-tooltip-problem-in-ie/211089 "2006-12-27T02:34:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jp182](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@jp182](https://forum.kirupa.com/u/jp182)\
**Post date:** [December 27, 2006, 2:34am UTC](https://forum.kirupa.com/t/javascript-tooltip-problem-in-ie/211089/1 "2006-12-27T02:34:38Z")

</div>

Alright, so I found this cool Tool Tip java @ [http://www.samisite.com/test-csb2nf/id121.htm](http://www.samisite.com/test-csb2nf/id121.htm)

Anyway, I put it on my page: [http://www.thespeedlounge.com/infotest.shtml](http://www.thespeedlounge.com/infotest.shtml)

and it looks great in Firefox (need to get some spacing issues fixed with the pictures) but IE puts the Tool Tip very high for some reason.

here’s the code:

```auto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="speed lounge, tsl articles, speed trials usa, project dc2, d1 2006, nhra d1, tsl" />
<title>TSL: Information</title>
<link rel="stylesheet" type="text/css" href="http://www.thespeedlounge.com/maintest.css" />
<script src="navi.js" type="text/javascript"></script>

<style type="text/css">
body {
	text-align:center;
	background-image: url(images/tile.jpg);
	background-repeat: repeat-x;
		}
#container {
	width:940px;
	margin:auto;
	padding:0px;
	text-align:left;
	}
.floatright { 
	float: right; 
	margin: 5px 5px 5px 5px;
	border: 1px solid #666;
	}
.floatleft { 
	float: left; 
	margin: 10px 10px 10px 10px;
	border: 1px solid #666;
	}
.floatmiddle { 
	float: left; 
	margin: 5px 5px 5px 30px;
	border: 1px solid #666;
	}
#left {
		height:1160px;
		float:left;
		voice-family: "\"}\"";
		voice-family:inherit;
		width:184px;
		}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #left {
	 /* ie5win fudge ends */
	width:184px;
	}
.leftmenu {
		voice-family: "\"}\"";
		voice-family:inherit;
		width:170px;
		}
.leftmenu2 {
		width:170px;
		height:1120px;
		}
#middle {
		height:1160px;
		float:left;
		voice-family: "\"}\"";
		voice-family:inherit;
		margin-left:5px;
		width:710px;
		}
/* Looks like you have to specify the width of #menu
or IE5 Mac stretches it all the way across the div, and 
Opera streches it half way. */
html>body #middle {
     /* ie5win fudge ends */
	width:729px;
	}
.middlemenu {
		width:715px;
		}
.middlemenu2 {
		width:615px;
		height:1120px;
		}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; color: #CC0066 }
#pup {position:absolute; visibility:hidden; z-index:200; width:260; }
 
</style>
</head>

<body>

<div id="container">

	<div id="title">
	<!--#include file="header.html" -->
	</div>
	<div id="header"></div>
	<div id="navi">		
	<!--#include virtual="/nav2.html" -->		
	</div>
	<br />
	<div id="left">
			<p class="leftmenu">&nbsp;&gt;&gt; <strong>Advertisement</strong></p>
			<p class="leftmenu2">
				<!--#include file="info/advertise.html" -->
			</p>    
	</div>
	<div id="middle">
	<!--
   ######################################################
   # JAVASCRIPT POPUPS ROUTINE VERSION #7 07-Feb-2001 #        
   # Written by Mike McGrath [mike_mcgrath@lineone.net] # 
   # PC-Tested for Netscape 3.04, 4.61, 6.0, & IE5.5 #
   # Note: Popups may not cover all form field inputs. #
   # PLEASE RETAIN THIS NOTICE WHEN COPYING MY SCRIPT. #
   # THIS SCRIPT IS COPYRIGHT OF MIKE MCGRATH 1998-2001 #
   ######################################################
-->
<script type="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -->
<!--

var Xoffset= -80; // modify these values to ...
var Yoffset= -80; // change the popup position.
var popwidth=200; // popup width
var bcolor="darkgray"; // popup border color
var fcolor="white"; // popup font color
var fface="verdana"; // popup font face

// create content box
document.write("<DIV ID='pup'></DIV>");

// id browsers
var iex=(document.all);
var nav=(document.layers);
var old=(navigator.appName=="Netscape" && !document.layers && !document.getElementById);
var n_6=(window.sidebar);

// assign object
var skin;
if(nav) skin=document.pup;
if(iex) skin=pup.style;
if(n_6) skin=document.getElementById("pup").style;

// park modifier
var yyy=-1000;

// capture pointer
if(nav)document.captureEvents(Event.MOUSEMOVE);
if(n_6) document.addEventListener("mousemove",get_mouse,true);
if(nav||iex)document.onmousemove=get_mouse;

// set dynamic coords
function get_mouse(e)
{
  var x,y;

  if(nav || n_6) x=e.pageX;
  if(iex) x=event.x+document.body.scrollLeft; 
  
  if(nav || n_6) y=e.pageY;
  if(iex)
  {
    y=event.y;
    if(navigator.appVersion.indexOf("MSIE 4")==-1)
      y+=document.body.scrollTop;
  }

  if(iex || nav)
  {
    skin.top=y+yyy;
    skin.left=x+Xoffset; 
  }

  if(n_6)
  {
    skin.top=(y+yyy)+"px";
    skin.left=x+Xoffset+"px";
  }    
  nudge(x);
}

// avoid edge overflow
function nudge(x)
{
  var extreme,overflow,temp;

  // right
  if(iex) extreme=(document.body.clientWidth-popwidth);
  if(n_6 || nav) extreme=(window.innerWidth-popwidth);

  if(parseInt(skin.left)>extreme)
  {
    overflow=parseInt(skin.left)-extreme;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }

  // left
  if(parseInt(skin.left)<1)
  {
    overflow=parseInt(skin.left)-1;
    temp=parseInt(skin.left);
    temp-=overflow;
    if(nav || iex) skin.left=temp;
    if(n_6)skin.left=temp+"px";
  }
}

// write content & display
function popup(msg,bak)
{

  var content="<TABLE WIDTH='"+popwidth+"' BORDER='1' BORDERCOLOR="+bcolor+" CELLPADDING=2 CELLSPACING=0 "+"BGCOLOR="+bak+"><TD ALIGN='center'><FONT COLOR="+fcolor+" FACE="+fface+" SIZE='2'>"+msg+"</FONT></TD></TABLE>";

  if(old)
  {
    alert(msg);
    return;
  } 
   
  yyy=Yoffset; 
  skin.width=popwidth;

  if(nav)
  { 
    skin.document.open();
    skin.document.write(content);
    skin.document.close();
    skin.visibility="visible";
  }

  if(iex)
  {        
    pup.innerHTML=content;
    skin.visibility="visible";
  }  

  if(n_6)
  {   
    document.getElementById("pup").innerHTML=content;
    skin.visibility="visible";
  }
}

// park content box
function kill()
{
  if(!old)
  {
    yyy=-1000;
    skin.visibility="hidden";
    skin.width=0;
  }
}

//-->
</script>
		<p class="middlemenu">&nbsp;&gt;&gt; <strong>Information</strong></p>
	  	<p class="middlemenu2">
			
			<a href="info/speed1.shtml" onmouseover="popup('SpeedTrials USA<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l11.jpg" alt="SpeedTrials USA - November, 2006"/></a>
			  
	  

			<a href="info/sema.shtml" onmouseover="popup('The Best of SEMA<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l10.jpg" alt="The Best of Sema - November, 2006"/></a>

			
		
			<a href="info/scion.shtml" onmouseover="popup('Scion Challenge 3.0<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l9.jpg" alt="Scion Challenge 3.0 - November, 2006"/></a>
	
			
		
			<a href="info/drift1.shtml" onmouseover="popup('Project Drift: Part 1<BR>November, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l8.jpg" alt="Project Drift: Part 1 - November, 2006"/></a>
			
			
            <a href="info/projectdc2.shtml" onmouseover="popup('Honda Day: Project DC2<BR>August, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()"><img class="floatleft" src="images/info/l7.jpg" alt="Honda Day: Project DC2 - August, 2006" /></a>
			

		
            <a href="info/hondaday.shtml" onmouseover="popup('Honda Day: BFG Diary<BR>August, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l6.jpg" alt="Honda Day: BFG Diary - August, 2006" /></a>

			
            <a href="info/vegas1.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 1<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po">
				<img class="floatleft" src="images/info/l5.jpg" alt="NHRA/D1 Vegas: Day 1 - July, 2006" /></a>

			
              <a href="info/vegas2.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 2<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l4.jpg" alt="NHRA/D1 Vegas: Day 2 - July, 2006" /></a>			
			
            <a href="info/vegas3.shtml" onmouseover="popup('NHRA/D1 Vegas: Day 3<BR>July, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l3.jpg" alt="NHRA/D1 Vegas: Day 3 - July, 2006" /></a>

				   
		
            <a href="info/info1.shtml" onmouseover="popup('Preparing for the 1320<BR>May, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l2.jpg" alt="Preparing for the 1320 - May, 2006" /></a>
        
						   
			
             <br/><a href="info/info3.shtml" onmouseover="popup('Q AND A w/ Staple<BR>May, 2006','#333333')" onmouseout="kill()" title="" onfocus="this.blur()" onmouseover="po"><img class="floatleft" src="images/info/l1.jpg" alt="Q AND A w/ Staple - May, 2006" /></a>
           
			
		</p>
 	</div>
  	<div id="footer" >
	<!--#include virtual="/footer.html" -->
	</div>
 </div> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-418872-1";
urchinTracker();
</script>
</body>
</html>

```
