Tooltip in an iframe needs to be displayed on parent window

JavaScript
1

I have some script that creates a tooltip (<div>) when you hover over certain information with in a table. the problem is that this table is in an iframe inside of a page. when the tooltip becomes too big for the iframe the viewable sections get cut off. what i would like to do is get it to layer over the parent window so that the entire div shows not just a piece of it. any help?

thanks in advance!

2

when the tooltip becomes too big for the iframe the viewable sections get cut off.

Obviously content in your iframe, like your tooltip <div> can’t spill over onto the main page. You have to put the <div> on the main page if you want it to be completely visible.

3

ok heres my 1 file


<html>
<head>
<style>
#dhtmltooltip{position:absolute;left:-300px;width:150px;border:1px solid black;padding:2px;background-color:#8C9EB5;visibility:hidden;z-index:100;color:#FFFFFF;font-weight:bold;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
.toolTipHeader{padding:0;font-size:10px;color:#FFFFFF;font-weight:bold;}
.toolTip{padding:0;font-size:10px;color:#FFFFFF;nowrap:nowrap;}
</style>
</head>
<body>
<script type="text/javascript">
var offsetfromcursorX=5 //Customize x offset of tooltip
var offsetfromcursorY=0 //Customize y offset of tooltip
var offsetdivfrompointerX=3 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=10 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
parent.document.open() //open doc
parent.document.write('<div id="dhtmltooltip"></div>') //write tooltip DIV to doc
parent.document.close() //close doc
var ie=parent.document.all
var ns6=parent.document.getElementById && !parent.document.all
var enabletip=false
var ContentInfo = ""
if (ie||ns6)
  var tipobj=parent.document.all? parent.document.all["dhtmltooltip"] : parent.document.getElementById? parent.document.getElementById("dhtmltooltip") : ""

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

function tip(TTitle, theWidth){
alert(parent.document.height);
ContentInfo = '<table>'+
                '<tr><td class="toolTipHeader">Ratings</td><td class="toolTipHeader">Label</td><td class="toolTipHeader">Criteria</td></tr>'+
                '<tr><td class="toolTip">1</td><td class="toolTip">Good</td><td class="toolTip">Average speed for typing 1 word a minute</td></tr>'+
                '<tr><td class="toolTip">2</td><td class="toolTip">Excellent</td><td class="toolTip">Average speed for typing 10 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
              '</table>';
  if (ns6||ie){
    if (typeof theWidth!="undefined") tipobj.style.width=theWidth+"px";
    tipobj.innerHTML=ContentInfo;
    enabletip=true;
    return false;
  }
}

function positiontip(e){
  if (enabletip){
    tipobj.style.left="100px"
    tipobj.style.visibility="visible"
  }
}

function hidetip(){
  if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
  }
}
parent.document.onmousemove=positiontip
</script>
<span onMouseover="tip('', 300)" onMouseout="hidetip()">tooltip</span>
</body>
</html>

and heres my second file


<html>
<body align="center" valign="center">
<iframe src="fun.jsp" width="100%"></iframe>
</body>
</html>

i need to let this tooltip expand outside of the iframe instead of only inside. i thought there was a way in javascript to do this. if not what other technology will let me do this?

4

see