Tooltip from RadToolTipManager behind ModalPopupExtender Panel

[Gert Conradie]

I have a ASP.Net page with a RadToolTipManager

Then I use a normal ASP.Net ModalPopupExtender that open a panel, but the tooltips for textboxes inside that panel, appear behind the modal window.

I do have a custom skin, so i can modify CSS - I played with the z-index, but no luck...

Thanks, Gert

 

[Svetlina Anati]

Hi Gert,

In order to correctly set the z-index you should set it through the RadToolTipManager's style attribute as shown below:

   <telerik:RadToolTipManager ID="manager" runat="server" style="z-index:100000" Width="150" Height="150" OnAjaxUpdate="manager_AjaxUpdate">

In case setting a very big z-index does not help, please open a new support ticket and send me a sample, fully runnable demo along with a detailed explanation of the problem and reproduction instructions.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Gert Conradie]

Thanks,

My attempts with z-index was to low.

Don't understand the threshold value of 10001 that is required, but will use it.

Regards

style

="z-index:10000" --> and less, hidden

 

style

="z-index:10001" --> and more, show

 

[Tony Helms]

This solution works well in MSIE 7 and 8 but not the latest FireFox. What do you recommend?

[Svetlina Anati]

Hi Tony,

If the problem occurs only under FF and not under IE, this means that the problem does not come from the z-index value but most probably from some positioning settings. What I can suggest since I do not have your code is to test whether rendering the tooltip as a child of the root will help - in order to do this you should set RenderInPageRoot = "true" for the tooltip manager and test again.


Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tony Helms]

Svetlina,

Thank you for the suggestion. RenderInPageRoot = "true" did not solve the problem. To recreate this simply code the following:
1) Create a new ASP.NET Page
2) Use the ASP AJAX ModalPopupExtender
3) Create a modal popup with form elements that have "tooltips" assigned
4) Include the RadToolTipManager
5) Adjust with the z-index trick documented below.

Run the page. Initate the Modal Popup. Pass your cursor of the form elements to see the tooltips appear.

In MSIE 7 and 8 they appear on top of the Modal as expected.

In FireFox they appear just behind the modal popup.

[Gert Conradie]

I can confirm the FF 3.0.10 problem

Dont know if it is the FF version - could have missed the issue when I tested my app in FF at that stage, or it did work on that FF version...

[Svetlina Anati]

Hello guys,

I tested the described setup and I was able to reproduce the problem. It turned out that the z-index of the tooltip gets overridden under FF. In ordre to get the desired result, you should set the bigger z-index through javascript in the OnClientShow event as shown below:

 

   function OnClientShow(sender, args)
    {
      sender.get_popupElement().style.zIndex = "100002";
    }

Greetings,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.