Tooltips get hidden behind dropdown lists? How can you avoid this? (IE6)

Question

I have a label with a tooltip attribute for rollover effect. This works all great. However, it seems to get hidden behind any dropdown lists that are nearby. I have tried adjusting the z-index, without any luck. This issue does not appear in firefox, and I have not tested it in later versions of IE.

I realize this is probably due to IE6s poor css standards-compatibility, but how can I get around this?

Answer 1

IE6 has a know error that selects always end up the highest in the z order...

Custom select control optional?

Have a look at this

Another idea is to use the ajaxtoolkit autocomplete?

Answer 2

Not the best because it requires javascript/jQuery library, but there's a workaround:

http://dhtmlgrounds.wordpress.com/2008/12/23/ie6-select-box-z-index-bug/

Answer 3

The select dropdown in IE6 is implemented as a Windows control, so the browser isn't really drawing it. Thus, it doesn't support features like z-index. One possible solution is to hide all select boxes on the page when you show your tool-tip. Another option is a custom dropdown, which you can find in libraries like Ext.

Answer 4

As astander and MikeWyatt said, selects in IE are topmost. There are two paths to work-around this problem:

1. Use a custom select box, rendered with divs, etc. This is rather cumbersome, since you won't be able to replicate all of the drop-down functionality.
2. Place an <IFRAME> under the tooltip (tooltip z-index > iframe z-index). This will work-around the problem, yet you have to worry about the positioning of the iframe overlay.