1

I have tooptips show up when hovering over a link. These tooltips show filtering options for column headers. A tooltip contains text, a drop down list or a text box. In Firefox and Chrome the CSS works fine, however in IE7+ there are problems.

  1. The tooltip appears over top all other objects on the page (as it's supposed to) except the original anchor link and image that you hover over. These get rendered over top the tooltip and it's contents.

  2. The tooltip, when containing a dropdown list, disappears when the mouse cursor opens the drop down list and moves onto the DDL's listing box. I'm assuming that when the cursor moves over the list, it no longer is hovering over the tooltip, and it closes. IE has problems with telling the tooltip that when hovering over the DDL's list, that its actually hovering over the tooltip itself.

My CSS is very straight forward:

ul li a:hover { background: #88f; border-style: none; }
.tooltip{
   z-index:25;
   border: none;
   color: inherit;
}

.tooltip:hover { z-index:25; position:relative;}

.tooltip span.tooltip_actual { display: none; }

.tooltip:hover span.tooltip_actual {
   display:block;
   position:absolute;
   top:-1em; left: -42em; width: 40em;
   border:1px solid #000;
   background-color: #fff; color:#000;
   text-align: left; padding: 1em; 
}

Has anyone run into this issue before and is there a work around?

EDIT: this is the tooltip bug: enter image description here

EDIT #2: Here is an example of my code: http://jsfiddle.net/NAXrc/

MarkP
  • 4,168
  • 10
  • 43
  • 84
  • I tried fiddling around with the z-index and it doesn't seem to do anything. I even tried to remove ALL CSS except for the tooltip code. It still appears broken. As for the dropdown list problem, i'm at a loss. – MarkP Jul 05 '11 at 17:17
  • Tooltip problems are a non-issue in IE8+. The dropdown list problem is evident even in the latest IE9. I might have to look into other avenues for displaying lists. – MarkP Jul 05 '11 at 18:08

1 Answers1

2

IE7 has known bugs with z-index.

If you can provide a test case, I can probably give you a better answer.

Otherwise, all I can do is point you to these resources:

however in IE7+ there are problems.

These problems should not exist in IE8/9. Is your page not using IE8/9 Standards Mode?

If your page is using Compatibility Mode (which emulates IE7) or Quirks Mode, that would explain why versions newer than 7 are also exhibiting the problem.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Our company's standard is still IE7, so I'm assuming that the people using this website (internal) are still using IE7. As long as it's still the baseline, I have no choice but to support it. – MarkP Jul 05 '11 at 16:05
  • Then you must try to apply the workaround I've linked to. If you can recreate the problem on [jsFiddle](http://jsfiddle.net/) or [JS Bin](http://jsbin.com/), I'll try to solve it for you. – thirtydot Jul 05 '11 at 19:38
  • I did what you asked. You can run this in IE7 standards mode and see that it performs OK, but the dropdown list closes the tooltip when trying to select and item. In IE8 mode, you see that the link/image is rendered above the tooltip. It also still exhibits the dropdown issue. Link: http://jsfiddle.net/NAXrc/ – MarkP Jul 06 '11 at 12:36
  • I'll take a look later today. I have to say, that looks very daunting. No promises! – thirtydot Jul 06 '11 at 15:32
  • 1
    Z-index was the issue. I was modifying the wrong portion of the CSS. This is what happens when you inherit legacy code :(. – MarkP Jul 07 '11 at 13:35