DHTML Tooltip appears UNDER dropdown-menu (<select>)

GeeZuZz · #1 06-23-2005, 07:24 AM

Are there really no workarounds for the problem with IE displaying dropdown menus ABOVE DHTML content?

I'm using THIS script, and it's pretty annoying that the tooltip is shown underneath any dropdown-menus (select) in the page.

Is it possible for the script to detect those, and move the box if it detects one? (like it moves upwards, if you move the tooltip all the way to the bottom of the page, preventing being shown outside the page)

jscheuer1 · #2 06-23-2005, 07:41 AM

Does the drop down menu have a z-index set? If so, did you try boosting the z-index of the tool tip?

PLEASE: Include the URL to your problematic webpage that you want help with.

GeeZuZz · #3 06-23-2005, 07:47 AM

Hello,

How do i specify Z-index on a drop down?

This image pretty much describes the problem: http://www.dynamicdrive.com/forums/a...entid=35&stc=1 (my page is in a local html doc)

This does only happen in IE.

jscheuer1 · #4 06-23-2005, 09:32 AM

That's not a drop down menu, it is a drop down box. The only solution I know of is to temporarily make the drop box invisible while the tool tip is being displayed. Add to whatever code displays the tool tips that have this problem something that accesses that drop box's properties like:

Code:

document.getElementById('boxOne').style.visibility='hidden';

Then, add to whatever code makes the tool tip go away:

Code:

document.getElementById('boxOne').style.visibility='visible';

This assumes an id="boxOne" attribute is assigned to the problem drop box. It would be better to access the the box's properties as a document element in a form if it is but, not seeing your code, I cannot be sure if it is one. If this is only a problem in IE make it like:

Code:

if (document.all){document.getElementById('boxOne').style.visibility='hidden'};

to allow other browsers to deal with it their own way.

GeeZuZz · #5 06-24-2005, 04:34 AM

Thanks for replying...

I have no experience with javascript

- is your code supposed to be in the tooltip script, or in the drop down box?

Click here for my example page (or see source at bottom of this post)

Where do i put the lines you gave me?

And do you mean adding "if (document.all)" would make Opera/Firefox not bother about it?

HTML Code:

<html>
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 3px solid #2C8CBF;
padding: 3px;
background-color: #FFF;
visibility: hidden;
z-index: 100;
}
</style>
<body>

<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © 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
***********************************************/

var offsetxpoint=-50 //Customize x offset of tooltip
var offsetypoint=+10 //Customize y offset of tooltip
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") : ""

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

function ddrivetip(thetext, thecolor, thewidth){
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){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-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=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
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+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>

<div onMouseover="ddrivetip('Here is a tooltip that displays underneath the below dropdown')" onMouseout="hideddrivetip()">Here is some text that will show tooltip</div>
<br>

<select name="select">
<option value="1">Dropdown value number one</option>
<OPTION value="2">2</OPTION>
<option value="3">3</option>
</select>

</body>
</html>

jscheuer1 · #6 06-24-2005, 05:39 AM

This will do it:

Code:

<div onMouseover="if (document.all&&!window.opera){document.all('select').style.visibility='hidden'};ddrivetip('Here is a tooltip that displays underneath the below dropdown')" onMouseout="hideddrivetip();if (document.all&&!window.opera){document.all('select').style.visibility='visible'};">Here is some text that will show tooltip</div>

Just substitute that for the divison you have. It works off of the name of the select element. To avoid potential confusion it would be better to name the select element something other than select. Like:

Code:

<div onMouseover="if (document.all&&!window.opera){document.all('mySelect').style.visibility='hidden'};ddrivetip('Here is a tooltip that displays underneath the below dropdown')" onMouseout="hideddrivetip();if (document.all&&!window.opera){document.all('mySelect').style.visibility='visible'};">Here is some text that will show tooltip</div>
<br>

<select name="mySelect">
<option value="1">Dropdown value number one</option>
<OPTION value="2">Nokia 2</OPTION>
<option value="3">Nokia 3</option>
</select>

It's possible to integrate this into the script but, if it is only for a few select (pun intended) boxes, it is not worth it.

GeeZuZz · #7 06-25-2005, 09:01 PM

Thanks you very much!!! That worked great

tech_learn · #8 08-24-2005, 05:29 AM

hi,

mr.Mad Professor,

Iam using a dynamic drive drop down menu. This is the version of that menu

/*********************************************************************************************************************************************
* (c) Ger Versluis 2000 version 5.411 24 December 2001 (updated Jan 31st, 2003 by Dynamic Drive for Opera7)
* HV Menu found on Dynamic Drive ONLY may be used on both commercial and non commerical sites *
* For info write to menus@burmees.nl *
* This script featured on Dynamic Drive DHTML code library: http://www.dynamicdrive.com
**********************************************************************************************************************************************/

problem is submenu going inside the dropdown box. how can i fix this bug?

reg
tech

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search