changing z-index

[Nik]

I'm having problems altering the z-index for my tooltip. IE is shoving the tooltip below our header. I tried adding a cssclass to the tooltip control, but using the ie web developer toolbar, its getting a z-index and other css values from I dont know where.

<span id="spnPers" class="mouse-pointer learn-more">learn more</span>
<rad:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="spnPers" IsClientID="true" Sticky="false" AutoCloseDelay="10000" Animation="none" Position="TopLeft" RelativeTo="Element" OffsetY="2" Height="100px" Width="300px" Skin="Default" Title="Personalize" CssClass="ontop">
<p>
Jazz up your folder presentation by personalizing your folders with a stock graphic and/or text. Choose from 4 different foil colors, 28 stock graphics and 11 font styles that are sure to add impact.
</p>
<br />
<p>
Additional $50 setup and $0.50 per folder foil fees apply. Personalized folders require a minimum purchase of 100 and then increments of 25.
</p>
<br />
<p>
Check on the Personalize box and click on the "Personalize and Add to Cart" button
to get started building your personalized folders.
</p>
</rad:RadToolTip>

.ontop
{
    z-index:10000;
}

[Rumen]

Hello Nik,

You can set the value of the z-index property of every Telerik control by using the common style property, e.g.

<rad:RadToolTip ID="RadToolTip1" runat="server" style="z-index: 10000" ...

You can find more information in the following article: Controlling absolute positioning with z-index.

Kind regards,
Rumen
the Telerik team

[Nik]

Adding this to my tooltip caused the text to be displayed inline with its triggering element until I hovered over that element. Even then, it still appeared under our header. I tried increasing the zindex to 100000, and still nothing. Our header is only at zindex of 3000.

If it's of any significance, we're using version 5/15/2008

[Cori]

Hello Nik,

Using your onTop css class. Try changing it to this:

.ontop
{
    z-index:10000 !important;
}

This will enforce the z-index of the RadToolTip, even if it's set inline.

I hope that helps.

[Nik]

Still nothing. IE web dev toolbar still shows the default zindex of 8000, which on its' own is higher than my header index of 3000. I'm getting a little confused why this is happening.

[Nik]

Also, I have a tooltip inside of a radmultipage panel, and it's appearing below the tabstrip as well. :( Interestingly tho, adding  style="z-index:95000;" to these tooltips didn't cause the text to go inline like the ones in the original post.

[Cori]

Hello Nik,

I don't understand why it would show inline. Have your tried setting RenderInPageRoot="true" on the ToolTip? I don't know if that will solve anything, but it may.

[Nik]

Cori, thanks for your suggestion...it didn't make any difference tho.

Another interesting note is that the tooltip works fine over the header in Firefox, but is appearing under the tabstrip...which I hadn't tested before. I thought this was just an IE issue, but it appears not.

I welcome any other suggestions...I really need to try and get this resolved today so I can push this live Monday.

[Svetlina Anati]

Hello Nik,

 I am afraid that I should examine the reproduction of the problem to be able to help. The possible reasons I could think of are the following ones:

1) A z-index which is less than the one of the other element
2) A parent or adjacent controls with specific position set


This being said the only things I can suggest without examining the setup are:

1) Make sure you have set the z-index by using the style attribute as my colleague suggested. You can also add the keyword !important to provide a higher priority to your setting in case it gets overridden for some reason - your setting should look like this:

<rad:RadToolTip ID="RadToolTip1" runat="server" style="z-index: 10000 !important" ...

2) Make sure that you have set RenderInPageRoot="true"

If this does not help, please send me a live url along with detailed explanations or best - a fully runnable reproduction page and I will do my best to help.

Best wishes,
Svetlina
the Telerik team