this is the subject of a number of recent posts
An IE fecher
need an IFRAME under the DIV
example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>ToolTip</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style type="text/css">
<!--
.Mess {
position:absolute;visibility:hidden;width:100px;top:0px;border:solid black 1px;
}
.zxcBG {
position:absolute;width:100%;top:0px;left:0px;background-color:#FFFFCC;
}
.zxcContent {
position:absolute;width:100%;top:0px;left:0px;text-align:center;font-size:12px;
}
-->
</style>
</head>
<body bgColor="#f8cd76" >
<center>
<br>
<br>
<br>
<table id="ToolTip" border="0" cellspacing="0" cellpadding="5" >
<tr>
<td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
<td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
<td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
<td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
</tr>
</table>
<select ><option>rrrrrrrrrxxxxxxxxxxxxxxxxxxxxxxxxxrrrrrrrrrrrrrrrrrrr</option></select><br>
<br>
<br>
MouseOver this <a id="T5" style="color:blue;text-decoration:underline;" onmouseover="zxcInitToolTip('T5','Mess4',20,-50);" > Text </a> to see the effect.
<br>
<div id="Mess1" class="Mess" style="overflow:hidden;width:150px;height:30px;" >
<div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="150" height="30" ></div>
<div class="zxcContent" >
Message 1
</div>
</div>
<div id="Mess2" class="Mess" style="overflow:hidden;width:150px;height:50px;background-color:red;padding:5px;" >
<a href="http://www.vicsjavascripts.org.uk" >
Message 2
</a>
</div>
<div id="Mess3" class="Mess" style="overflow:hidden;width:150px;height:30px;" >
Message 3
</div>
<div id="Mess4" class="Mess" style="overflow:hidden;width:160px;height:65px;">
<div class="zxcBG" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="65" ></div>
<div class="zxcContent" >
<a href="http://www.vicsjavascripts.org.uk" >VicsJavaSripts</a><br>
<a href="http://www.js-examples.com" >JS-Examples</a><br>
<div style="position:relative;width:100px;background-color:red;" >Message 3</div>
Message 4<br>
</div>
</div>
<br>
<br>
<script language="JavaScript" type="text/javascript">
<!--
// ToolTip zxcPart1 (05-12-2005)
// by Vic Phillips zxcPart1 http://www.vicsjavascripts.org.uk
// MouseOver a topic and the ToolTip will appear
// MouseOut or MouseOver another topic and the first ToolTip will disappear
// while the ToolTip for the current topic appears.
// MouseOver a ToolTip to prevent the ToolTip retracting.
// Each ToolTip may be specifically positioned relative to the topic.
// There may be as many topics or ToolTips as required on a page.
// Each topic may have a specific ToolTip or share a ToolTip.
// Application Notes.
// Elements requiring a ToolTip must be allocated a unique id
// The ToolTips are defined in the HTML code and may contain common HTML Code including links
// Each ToolTip must have a unique id.
// The ToolTip style must be set in a class or inline style to
// position must be absolute,
// visibility must be hidden.
// e.g.
// <div id="Mess2" class="Mess" ><a href="http://www.vicsjavascripts.org.uk" >Message 2</a></div>
// The Script would normally be initialised from a mouseover event
// eg
//<table id="ToolTip" border="0" cellspacing="0" cellpadding="5" >
// <tr>
// <td id="T1" onmouseover="zxcInitToolTip('T1','Mess2',20,30);" width="100" align="center" bgcolor="#999966" >Topic 1</td>
// <td id="T2" onmouseover="zxcInitToolTip('T2','Mess1',20,30);" width="100" align="center" bgcolor="#FFFF99" >Topic 2</td>
// <td id="T3" onmouseover="zxcInitToolTip('T3','Mess4',20,30);" width="100" align="center" bgcolor="#FFFFCC" >Topic 3</td>
// <td id="T4" onmouseover="zxcInitToolTip('T4','Mess4',20,30);" width="100" align="center" bgcolor="#CC9966" >Topic 4</td>
// </tr>
// </table>
// Each parameter of the call 'zxcInitToolTip(' containes an array defining each ToolTip specification
// field 0 = the unique id of the element to attach the ToolTip to (string)
// field 1 = the unique id if the ToolTip <DIV> (string)
// field 2 = the horizontal(X) offset of the ToolTip (digits)
// field 3 = the vertical(Y) offset of the ToolTip (digits)
// All variables, function names etc are prfixed with 'zxc' to minimise conflicts with other JavaScripts
// Tested with IE6 and Mozilla FireFox
// Global Customising Variables
var zxcZIndex=4; // the base Z-Index of the ToolTips
var zxcSpeed=20; // The speed of extension/retraction (minimum = 2 = fastest)
var zxcIncrement=2; // the height increment during the extension/retraction (minimum 1 )
var zxcMouseOutDelay=500; // the delay before retracting the ToolTip (minimum 1 )
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// YoYo ToolTip zxcPart2 (02-12-2005)
// by Vic Phillips zxcPart1 http://www.vicsjavascripts.org.uk
// Functional Code - NO NEED to change
var zxcLast,zxcTO,zxcIF;
var zxcCnt=0;
if (zxcSpeed<2){ zxcSpeed=2; }
if (zxcIncrement<1){ zxcIncrement=1; }
if (zxcMouseOutDelay<1){ zxcMouseOutDelay=1; }
function zxcInitToolTip(){
zxc=zxcInitToolTip.arguments;
zxcmt=document.getElementById(zxc[0]);
if (zxcmt.m){return }
zxcbdy=document.getElementsByTagName('BODY')[0];
if (!zxcIF){
zxcIF=document.createElement('IFRAME')
zxcIF.style.position='absolute';
zxcIF.style.visibility='hidden';
zxcbdy.appendChild(zxcIF);
}
zxcmt.m=document.getElementById(zxc[1]).cloneNode(true);
zxcbdy.appendChild(zxcmt.m);
zxcmt.m.ifr=zxcIF.cloneNode(true);
zxcbdy.appendChild(zxcmt.m.ifr);
zxcmt.m.id='zxcid'+(zxcCnt++);
if (!zxc[2]){ zxc[2]=0; }
if (!zxc[3]){ zxc[3]=0; }
zxcmt.m.style.zIndex=zxcZIndex;
zxcmt.m.ifr.style.width=zxcmt.m.offsetWidth+'px';
zxcmt.m.ifr.style.height=zxcmt.m.offsetHeight+'px';
zxcmt.pos=[zxcmt,zxc[2],zxc[3]];
zxcmt.m.down=false;
zxcAddOver(zxcmt);
zxcAddOut(zxcmt);
zxcAddOut(zxcmt.m);
zxcAddClear(zxcmt.m);
}
function zxcOver(){
clearTimeout(zxcTO);
zxcLastObj();
if (!this.m.down){
this.m.down=true;
this.m.style.left=(zxcPos(this.pos[0])[0]+this.pos[1])+'px';
this.m.style.top=(zxcPos(this.pos[0])[1]+this.pos[2])+'px';
this.m.style.visibility='visible';
this.m.style.zIndex=zxcZIndex+2;
if (document.all){ this.m.ifr.style.visibility='visible'; }
this.m.ifr.style.zIndex=zxcZIndex+1;
this.m.ifr.style.left=this.m.style.left;
this.m.ifr.style.top=this.m.style.top;
}
else {
this.mobj.down=false;
}
zxcLast=this;
}
function zxcLastObj(){
if (zxcLast){
zxcLast.m.style.zIndex=zxcZIndex;
zxcLast.m.down=false;
zxcLast.m.style.visibility='hidden';
zxcLast.m.ifr.style.visibility='hidden';
}
}
function zxcOut(){
zxcTO=setTimeout('zxcLastObj()',zxcMouseOutDelay);
}
function zxcClear(){
clearTimeout(zxcTO);
}
function zxcPos(zxc){
zxcl=zxc.offsetLeft;
zxct=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcp=zxc.offsetParent;
zxcl+=zxcp.offsetLeft;
zxct+=zxcp.offsetTop;
zxc=zxcp;
}
return [zxcl,zxct];
}
function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}
function zxcAddOver(zxc){
if (zxc.addOver){ return; }
zxc.addOver=zxcOver;
zxcEventAdd(zxc,'mouseover','addOver');
}
function zxcAddOut(zxc){
if (zxc.addOut){ return; }
zxc.addOut=zxcOut;
zxcEventAdd(zxc,'mouseout','addOut');
}
function zxcAddClear(zxc){
if (zxc.addClear){ return; }
zxc.addClear=zxcClear;
zxcEventAdd(zxc,'mouseover','addClear');
}
//-->
</script>
</BODY>
</html>
