RadToolTip Issues

[DogBizPro]

I am having a few issues in using the RadToolTip feature.

1. One issue is the tooltip box will flicker if it is in an UpdatePanel without UpdateMode set to conditional in Google Chrome. Works fine in Firefox, Safari & IE.

2. The second is the location of the tool tip. In Chrome, it is always showing at the very top of the page despite having RelativeTo="Element" or RelativeTo="Mouse" set. In FireFox, Safari & IE, RelativeTo="Element" shows at the top of the page also, but RelativeTo="Mouse" shows up where I would expect.

How do I resolve these two issues?

[Marin Bratanov]

Hello Stephanie,

The most likely reason for the flicker is that the tooltip is included in the partial page rendering, thus it is disposed and recreated. In this case, such a flicker is inevitable. Most likely, adding the UpdateMode=Conditional setting excluded the control from the response and thus, it is not disposed. To avoid such a flicker, you would need to revise you AJAX settings. Usually, updating the tooltip control itsels is not needed, updating its content usually is enough.

As for positioning - I first advise that you examine this section to make sure you have all the needed properties set: http://www.telerik.com/help/aspnet-ajax/tooltip-troubleshooting-common-issues.html#incorrectPosition. Then, please make sure you are using the latest version, because a breaking change in Chrome about a year ago caused incorrect positioning and we have taken care of that in our later releases. You can also try setting the RenderInPageRoot property to true.

Regards,

Marin Bratanov
Telerik

 

 

[DogBizPro]

Yes, I know the flicker is related to partial rendering. We have the RadToolTip inside an update panel and a <ajaxToolkit:TabContainer. I can set the update panel update mode to conditional, but that is not what we desire. What is interesting is it is not all the time that it flickers either. Sometimes it loads fine (well at the top of the page), other times it flickers...

I do believe we have everything set correctly. We have to RadToolTips on a few pages and a couple work fine. This is what we have on one of the pages with the issue. The pages with the issues are the ones where the RTT is inside the ajax Tab Container...

    <telerik:RadToolTipManager ID="rttDog" runat="server" Position="BottomRight" Animation="Fade" OnAjaxUpdate="OnAjaxUpdate_Dog" RelativeTo="Element" Width="380px" Height="50px" RenderInPageRoot="true" EnableShadow="false" AutoCloseDelay="3000" OnClientResponseError="OnClientResponseError" />
    <telerik:RadToolTipManager ID="rttClient" runat="server" Position="BottomRight" Animation="Fade" OnAjaxUpdate="OnAjaxUpdate_Client" RelativeTo="Element" Width="380px" Height="50px" RenderInPageRoot="true" EnableShadow="false" AutoCloseDelay="3000" OnClientResponseError="OnClientResponseError" />

[Marin Bratanov]

Hello,

When OnAjaxUpdate is used, it is expected to have problems when the tooltip manager is in another update panel, and the case is described here: http://www.telerik.com/help/aspnet-ajax/tooltip-troubleshooting-common-issues.html#TooltipHides. Thus, it is recommended to keep Tooltipmanager controls out of update panels or to make sure they have UpdateMode=Conditional to prevent issues like these.

Overall, the RadToolTipManager setup seems fine and should not result in issues. Thus, what I can advise at this point is the following:

• Remove the animations.
• Make sure the latest version is used. Currently this is Q3 2014 SP1 (2014.3.1209) with Q1 2015 just around the corner.
• Remove all CSS from the page, as positioning rules (like margin: auto) to top-level HTML elements can cause similar problems.
• We discussed similar positioning issues that were due to focus() in a previous thread, so this may be the case again and the information there may help: http://www.telerik.com/forums/radwindow-off-top-of-screen.
• Set the ScriptCombine property of the ToolkitScriptManager to false as the AjaxControlToolkit is prone to breaking our controls. You can read more on the matter in this sticky thread:http://www.telerik.com/forums/telerik-ui-for-asp-net-ajax-and-ajax-control-toolkit . They are no longer compatible with asp:ScriptManager, so we cannot guarantee compatibility with them and since it seems their TabContainer is causing the problem, it is possible that there is no workaround for it.
• Consider removing the AjaxControlToolkit from your project. You can use RadTabStrip+RadMultiPage instead.

Regards,

Marin Bratanov
Telerik

 

 

[DogBizPro]

Having to post this again, because I received a server error on your website after typing it all up....

Thank you for the ideas I tried all of them but updating and none of them work. What is interesting is that if I use the RadToolTipManager on the same page but outside of the ajax tab panel it appears in the correct location. If I use the RadToolTip inside the ajax tab panel it works and shows up in the correct location.

So, how do I show the content of the user control using the RadToolTip tag instead of the RadToolTipManager tag?

[DogBizPro]

Having to post this again, because I received a server error on your website after typing it all up....

Thank you for the ideas I tried all of them but updating and none of them work. What is interesting is that if I use the RadToolTipManager on the same page but outside of the ajax tab panel it appears in the correct location. If I use the RadToolTip inside the ajax tab panel it works and shows up in the correct location.

So, how do I show the content of the user control using the RadToolTip tag instead of the RadToolTipManager tag?

[DogBizPro]

Having to post this again, because I received a server error on your website after typing it all up....

Thank you for the ideas I tried all of them but updating and none of them work. What is interesting is that if I use the RadToolTipManager on the same page but outside of the ajax tab panel it appears in the correct location. If I use the RadToolTip inside the ajax tab panel it works and shows up in the correct location.

So, how do I show the content of the user control using the RadToolTip tag instead of the RadToolTipManager tag?

[Marin Bratanov]

Hello Stephanie,

I strongly advise that you update, at least to test if this behavior improves in the current version (Q1 2015).

There is no obvious reason for a difference in behavior between a standalone RadToolTip and a RadToolTipManager, so I can advise the following:

• try the Lightweight RenderMode
• try setting the RenderInPageRoot property to true

As for loading content on demand in a RadToolTip - you can do that as if you had to load any dynamic user control in it. Note that you must recreate this user control with each postback and this is not something RadToolTip does for you. RadToolTipManager fires its AjaxUpdate event to facilitate this, but dynamic controls creating in this case is up to the developer.

That being said, here is a basic example:

<telerik:RadToolTip ID="RadToolTip1" runat="server" Width="300px" Height="100px" ShowEvent="FromCode" HideEvent="ManualClose"
    RelativeTo="Element" Position="BottomRight" OnClientShow="OnClientShowHandler">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">

    </telerik:RadAjaxPanel>
</telerik:RadToolTip>
<span onmouseover="showtTip(this);">target 1</span>
<br />
<br />
<br />
<br />
<br />
<br />
<span onmouseover="showtTip(this);">target 2</span>
<script type="text/javascript">
    function OnClientShowHandler(sender, args) {
        $find("<%=RadAjaxPanel1.ClientID%>").ajaxRequest();
    }
    function showtTip(target) {
        var ttip = $find("<%=RadToolTip1.ClientID%>");
        if (target != ttip.get_targetControl() || !ttip.isVisible()) {
            ttip.set_targetControl(target);
            setTimeout(function () {
                ttip.show();
            }, 20);
        }
    }
</script>

protected void RadAjaxPanel1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    addCtrl();
    //note: persisting/recreating the control must be improved to work properly
}

protected void addCtrl()
{
    TextBox tb = new TextBox();
    tb.ID = "tb1";
    RadAjaxPanel1.Controls.Clear();
    RadAjaxPanel1.Controls.Add(tb);
}

Regards,

Marin Bratanov
Telerik