Tooltip gets hidden behind controls in IE6!

Question

Hi,

While mousing over a particular label in my web application, the tooltip that has to be displayed gets hidden behind the adjacent control, thereby providing less visibility. It works in IE7 and Firefox properly, but not in IE6.Any possible solution to this problem?

Thanks, Geetha

Answer 1

Try setting the position as relative / absolute (is it is not already) and then explicitly set the z-index for every control

Answer 2

This is an annoying 'feature' of IE6 to get around.

What I have done in the past is actually place an iframe directly behind the tooltip at the exact same location and size of the tool tip.

Eg of HTML:

<iframe id="iframeHint" runat="server" class="PopupHint"></iframe>
<div runat="server" id="divHint" class="PopupHint">
   Tool tip text here.
</div>

Eg of CSS used:

div.PopupHint
{
    position: absolute;
    width: 300px;
    left: -1000px;
    border: 1px solid #2F4F88;
    padding: 2px 2px 2px 2px;
    background-color: #E5ECF9;
    color: #000000;
    visibility: hidden;
    z-index: 1001;
}

iframe.PopupHint
{
    position: absolute;
    width: 300px;
    left: -1000px;
    padding: 2px 2px 2px 2px;
    visibility: hidden;
    z-index: 1000;
}

The javascript to display the tip would position the tooltip iframe and div at the exact same position with the z-index set to a smaller value to ensure it is behind the text div. The iframe will cover the other controls in IE6.