PDA

View Full Version : BUG FOUND: Cool DHTML tooltip script II



mbz
03-23-2006, 04:06 AM
BUG FOUND: Cool DHTML tooltip script II

Bug found in this script:
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip2.htm

Bug Details:
The issue is IE specific, and only occurs when the tooltip must appear over a form SELECT menu item. In this case, the form SELECT menu item appears above the tooltip content.

Note: Playing with the z-Index of the tooltip or form SELECT menu item appears to have no effect on this bug.

Possible Fix:
I have read about a fix for this bug where you somehow embed an IFRAME into the tooltip (with certain perameters set for the IFRAME using CSS) to get around this issue, however have no clue as how to actually implement this fix. The following site has an example of this fix, however when I try to implement the fix it makes all the text within the tooltip actually take on an alpha/opacity type characteristic: http://www.hedgerwow.com/360/bugs/css-select-free.html

Please advise. :eek:

Best Regards,
MIKE

jscheuer1
03-23-2006, 05:04 AM
Not a bug in the script, it is a bug in IE. Possibly this will be fixed in IE7. What you are talking about can be done. An iframe is created and sized to the dimensions of the tip and located in the same absolute position. Its z-index is set to anything over zero and the tip's z-index is set to at least one greater. The iframe must be made to appear and disappear at the same time as the tip. All of this must be done in IE only as it will mess things up in other browsers.

Another approach is to simply move the select away from where the tip will be.

Yet another is to set the visibility of the select to hidden during the time that the tip is displayed and returning it to either nothing or setting it to visible when the tip is gone.

ddadmin
03-23-2006, 05:36 PM
Yep, like John said, this is simply a behavioral problem in IE6. I think I may have read on IEblog (http://blogs.msdn.com/ie/) that this issue will be resolved in IE7.

jscheuer1
03-23-2006, 06:00 PM
The shim idea is the most professional looking option short of simply moving the select away from where the tip will be, which as mundane as it sounds, is actually the best solution. This is especially true in this case as the tippointer needs its own shim and owing to the vagaries of the IE bug, over a select, a part of the pointer shim must be visible, as well as any part of the tip shim that backs up a dropshadow (if used) that is not actually covered by the drop shadow. With those limitations in mind, this I believe, is as good as the shim idea gets with this script:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:lightblue;
}

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>

<!--[if gte IE 5.5]>
<![if lte IE 6]>
<iframe id="shim" src="" style="position:absolute;display:none;filter:progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');" scrolling="no" frameborder="0"></iframe>
<iframe id="shim2" src="" style="position:absolute;display:none;filter:progid:DXImageTransform.Microsoft.Chroma(Color='#ffffff');" scrolling="no" frameborder="0"></iframe>
<![endif]>
<![endif]-->

<script type="text/javascript">
function shimit(obj){
if (typeof shim=='undefined')
return;
var shimobj=document.getElementById('shim').style;
if (!nondefaultpos){
var shimobj2=document.getElementById('shim2').style;
shimobj2.width=pointerobj.offsetWidth+'px'
shimobj2.height=pointerobj.offsetHeight+'px'
shimobj2.top=pointerobj.style.top
shimobj2.left=pointerobj.style.left
shimobj2.zIndex=99;
shimobj2.display='block'
}
shimobj.height=obj.offsetHeight+'px'
shimobj.width=obj.offsetWidth+'px'
var obj=obj.style
shimobj.left=obj.left
shimobj.top=obj.top
shimobj.zIndex=99
shimobj.display='block'
}

function noshim(){
if (typeof shim=='undefined')
return;
document.getElementById('shim').style.display='none';
document.getElementById('shim2').style.display='none';
}
</script>

</head>
<body>
<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script II- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums to deal with IE
* select bug in IE5.5 through IE6 by jscheuer1
***********************************************/

var offsetfromcursorX=12 //Customize x offset of tooltip
var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer image

var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

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

function ddrivetip(thetext, thewidth, thecolor){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
nondefaultpos=false
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth){
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=curX-tipobj.offsetWidth+"px"
nondefaultpos=true
}
else if (curX<leftedge)
tipobj.style.left="5px"
else{
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
pointerobj.style.left=curX+offsetfromcursorX+"px"
}

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight){
tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
nondefaultpos=true
}
else{
tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
pointerobj.style.top=curY+offsetfromcursorY+"px"
}
tipobj.style.visibility="visible"

shimit(tipobj);
if (!nondefaultpos)
pointerobj.style.visibility="visible"
else
pointerobj.style.visibility="hidden"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"

noshim();
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>
<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
onMouseout="hideddrivetip()">Search Engine</a><br>&nbsp;<br>
<select>
<option>fgbjfgbha
<option>fgbjfgbha
<option>fgbjfgbha
<option>fgbjfgbha
</select>
</body>
</html>