HTML dropdowns stay on top of my "Tool Tip"

need helping my <select> dropdowns to stay under tool tip

[benlieb]

Hi Guys and Gals,

I am using a tool tip javascript to show info about something you hover over.

The problem:

In I.E. the <select> dropdowns stay on top of the tool tip, that is, the tool tip goes under the <select> boxes. Any ideas on how to correct this?

Here are some things I've already tried

• z-indexes
  
• re-positioning the <div></div> tool tip box inside and outside of all other <div>s to see what would happen
  

[RonPK]

AFAIK there is no way to get anything on top of a <select> in IE. I'm afraid you will have to wait until everybody uses IE7 - they've solved the issue in that version.

[Bernard Marx]

There are two solutions that have done the rounds. One involves hiding the offending form control when the tooltip is active. The other involves using a small IFRAME element as the tooltip.

I'll just add that the coding for either is probably jolly good fun.
(exit stage left...)

[Don_Hoagie]

Well, you've gotten all the basic information you need in those two replies... but i suppose to add a bit for technical reference in case you want to research it, i'll tell you that <form> items are windowed elements, as opposed to windowless elements, the term that covers nearly everything else in HTML.

IE6 feels that windowed elements should always be on top, which is why your z-index will not solve the issue. Other browsers don't have this problem, as you've apparently noticed.

As Bernard Marx said, you have some work-arounds for the issue, and from what i've seen the most popular fix is his first-mentioned one: a Javascript function which hides the windowed elements if your mouse is in the area of the windowless elements. This fix sure can get ugly though.... the code AND the aesthetic.

[DrDoc]

... which is not entirely true. Yes, regular DHTML stuff cannot be placed above a <select> element, as you have experienced.

The two solutions mentioned in this thread are by far the simplest: hide select box when appropiate; use iframe for DHTML layer

There is, however, another solution. It involves replacing the entire select element itself with an object (using the appropriate clsid for a combo box). This process is quite complex, and IMO not worth it. For anyone interested there is, however, a lengthy (and technical) tutorial by DevGuru on the subject [devguru.com].