RadToolTipManager issues in some browsers

[Martin Roussel]

Hi, I have two issues that are occurring in different browsers (and not in some others). Im Using Q2 2012. I have a RadGrid containing an hyperlink column where I add dynamically in code-behind a RadTooltip (containing an image) on some conditions.

Browser versions: Chrome Version 23.0.1271.95 m , Safari for Windows 5.1.7 (7534.57.2) , Opera 12.02 (Build 1578) , Firefox 16.0.2, IE8.

Issue #1 (occuring in Chrome , Safari and Opera but not in Firefox and IE8):
When clicking quickly (not letting time to tooltip to show) on the hyperlink, it opens the image in a new browser window (no problem so far). When I come back to my original page, the tooltip image is shown (but it shouldnt). In Chrome and Safari, this doesnt occur if we click on the link and quickly move the cursor off the hyperlink (before the new page loads), but it is still annoying for users (note that tooltip should only appear after being hovering the link for 1 sec).

Issue #2 (occuring only in Chrome): when tooltip image is shown and hyperlink in low in browser screen, pop-up is not located where we can fully see it. All other browsers seem to adjust the popping location of the tooltip so we dont have to scroll down to see it (or minimal scroll is required).

maybe those issues are browser limitations, but Im just making sure. Or maybe Q3 2012 has these already resolved?

RadGrid column:

<telerik:GridTemplateColumn HeaderText="" UniqueName="strFieldValue" HeaderStyle-Width="75%" Resizable="true" Reorderable="true">
                                                <ItemTemplate>
                                                  <asp:HyperLink ID="hl" Target="_blank" runat="server" Text='<%# Eval("LinkResource")%>' NavigateUrl='<%# Eval("LinkValue")%>'></asp:HyperLink>
                                                </ItemTemplate>
</telerik:GridTemplateColumn>

Conditional Tooltip assignation when data are bound:

protected void RadGrid2_OnItemDataBound(object sender, GridItemEventArgs e)
        {

            if (e.Item is GridDataItem)
            {
                Control HyperLink = e.Item.FindControl("hl");

                if (((DTO)e.Item.DataItem).LinkValue != "" && ((DTO)e.Item.DataItem).blnIsImage)
                {
                    this.RadToolTipManager1.TargetControls.Add(HyperLink.ClientID, ((DTO)e.Item.DataItem).LinkValue, true);
                }

            }

        }

Tooltip setup:

protected void RadToolTipManager_OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            UpdateToolTip(args.Value, args.UpdatePanel, Page);
        }

public void UpdateToolTip(string strVal, UpdatePanel panel, System.Web.UI.Page pg)
        {
            Control ctrl = pg.LoadControl("ucTooltipContainer.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
            ucTooltipContainer details = (ucTooltipContainer)ctrl;

            if (strVal != "")
            {
                details.SetImage(strVal);
            }
        }

public void SetImage(string strPath)
        {
            TooltipImage.ImageUrl = strPath;
        }

TooltipManager definition:

<telerik:RadToolTipManager runat="server" ShowDelay="1000" AutoCloseDelay="0"  ID="RadToolTipManager1"
RelativeTo="Element"  Position="MiddleRight" OnAjaxUpdate="RadToolTipManager_OnAjaxUpdate" Skin="WebBlue"
HideEvent="LeaveTargetAndToolTip"  Width="480px" Height="227px">
</telerik:RadToolTipManager>

[Marin Bratanov]

Hi Martin,

Straight to your points:

1) By default hyperlinks will navigate the user to their href, this is what clicking them is supposed to do. The TooltipManager is configured to show on mouseover, so it will not prevent the clicks. You can prevent them by cancelling the onclick event of the anchor or by setting ShowEvent=OnClick for the manager so that it will register its own click handlers and disable the default ones.

2) The tooltips should stay in the visible viewport, so your report is rather strange. What I can suggest is that you try the following things (in this order):
- set the RenderInPageRoot property of the manager to true
- remove custom CSS you have on the page, since chrome has issues with returning correct positions of elements that are inside a scrolled div with position: relative
- try calling the updateLocation() method of the tooltip in the OnClientShowEvent. The first argument it receives is the tooltip that fired it. You can also try adding a small timeout around it. Also, you can do that only for chrome (see this article and the isChrome flag)
- look for position: relative in the CSS of RadControsl you have on your page and if found try to override it to see if this helps

Regards,
Marin Bratanov
the Telerik team

[Martin Roussel]

Marin,

For issue #1, I think you misunderstood the problem. The fact that an hyperlink click generates a new page is not the issue. Its the fact that the tooltip appeared without the user wanting it to pop (it didnt spent 1sec hover the link... it clicked it immediately). I think the problem is after the click, the cursor is in fact still hovering the link (in the background) and some browsers sees it as a hovering. What I also find strange is Opera (Chrome and Safari seems ok on that) still pops the tooltip even if take care to quickly moving the cursor outside the link immediately after the link click.

For issue #2, updateLocation() with a timeout as you suggested seems to help on Chrome (and doesnt seem to affect other browsers even if not using IsChrome). The only problem it doesnt solve is the small arrow pointing to the target seems not updated when tooltip is repositioned. Also, the tooltip appearing in one place and reappearing to another might confuse users which is not ideal.

BTW upgrading to Q3 2012 didnt help.

Thanks

[Marin Bratanov]

Hi Martin,

Thank you for the clarification. I was able to observe this behavior. It also seems to me that the browser counts the mouse as still being over the link, since the new page that opens consumes the mouse events. In my testing I did not get a tooltip if I increased the ShowDelay to 1500 or 2000, so if it is acceptable for your case you can give that a try. I am sorry to say that I cannot provide any further insight into this, but it seems to be related to the way the browser handles the old page when opening a new one. Perhaps Opera opens the new tab faster and it consumes the mouse sooner, so you do not get the mouseout at all. What I can also suggest is that you turn on the caching for the tooltips to prevent additional requests for the same content. See this demo for more information on that.

On the second issue - you can also try calling the tooltip's _adjustCallout() method as well in order to get the callout (small arrow) positioned as expected. I can also send you a more complex repositioning and resizing logic that relies on hiding the popup until all the content is received and then resizing it to match the content and get a proper position. For now I would recommend increasing the tooltip dimensions a bit. Such positioning issues are often due to insufficient height set to the tooltips so the content stretches them. This help article (and more precisely its first section) treats such common problems.


Kind regards,
Marin Bratanov
the Telerik team

[Martin Roussel]

Thanks Marin,

Issue #1: I tried increasing the ShowDelay value (to even 10000) and still have the problem. Only difference is you have to spend the same amount of time (10sec) in the new tab/screen to see it when coming back. Turning on the cache didnt change anything. Can you send that testing sample that worked for you.

Issue #2: _adjustCallout() seems to do the trick for the pointing arrow. Yes, please send also that more complex sample you've mentioned. In my case, im not sure increasing the height is the solution since the size of my tootlips will never be the same and cant be predicted (it will be totally dynamic per user preferences). That's why I think you sample might help.

TIA

[Marin Bratanov]

Hello Martin,

What I had in mind was clearing the browser and ASP caches in case something stayed there while it shouldn't. The behavior is quite peculiar and I am afraid I cannot provide any further details or options on it. Nevertheless, I am attaching the files I used in my previous tests. The only other idea I can think of is trying the onclick event of the hyperlink - have it call a function that will get a reference to the current tooltip (see how to do that here) nad hide() it. You can try that with a small timeout (even 0ms could be enough).


On resizing the tooltips - I can also suggest you try removing the height altogether, leaving only width (that, if possible, will accommodate all cases). You may then not even need to call additional methods in the OnClientResponseEnd if you are using the latest version. This should be tested, since every resizing case is different because of the different content that comes in. I am also attaching here a second archive that contains two text documents with several ideas. One has the complex logic that calculates dimensions and prevents the initial showing of the tooltip (ToolTipResizing.txt) and the other offers a simpler solution with a second idea at the end. This is altogether four more options you can try on getting size and position as desired.


Regards,
Marin Bratanov
the Telerik team

[Martin Roussel]

Marin,

Issue #1: I was already clearing the ASP and browser cache from the beginning so I dont think this was the issue. I tested you sample and the problem was easily reproduceable in it. However, your idea of using the onclick event pointed me to a "workaround". We have to watch out for of the timeout delays in the js code since the "OnClientShow" that is fixing tooltip position will cause problems if executed after the closing. Here is the code:

<telerik:RadToolTipManager runat="server" ShowDelay="1000" AutoCloseDelay="0"  ID="RadToolTipManager1"
RelativeTo="Element"  Position="MiddleRight" OnAjaxUpdate="RadToolTipManager_OnAjaxUpdate" Skin="WebBlue"
HideEvent="LeaveTargetAndToolTip" OnClientShow="RadToolTipManager_OnClientShow">
</telerik:RadToolTipManager>

<asp:HyperLink ID="hl" Target="_blank" runat="server" OnClick="CloseTooltip()" Text='<%# Eval("strLinkResource")%>' NavigateUrl='<%# Eval("strLinkValue")%>'></asp:HyperLink>

function RadToolTipManager_OnClientShow(sender, eventArgs) {
    setTimeout(function () {
        sender.updateLocation();
        sender._adjustCallout();
    }, 500);
}

function CloseTooltip() {
    setTimeout(function () {
        var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
        if (activeTooltip != null) {
            activeTooltip.hide();
        }
    }, 1600);
}

This still opens the tooltip (bandwith waste) in the background but at least the user wont see it in most cases. The only way I manage to see it was 1-when the new page was not opening full screen (and the tooltip is large enough...occured in Safari for Windows) or 2-when, once the link is clicked, waiting long enough for the tooltip to show but closing it quick enough so It didnt had time to close (but it will close almost immediately by itself after coming back to the original page). At least the user doesnt have to close it by himself.

Issue #2: leaving the width alone is not successful in my case since Chrome and Safari stretch the tooltip too wide when its content is originally thinner. Setting no width and no height (with the repositioning workaround) gives the best results cross-browsers so far. I didnt test intensively, but the solution in "DynamicContentResizingToolTipManager.txt" didnt change anything (I couldnt see any resize/relocation occuring). I have yet to test "ToolTipResizing.txt" but it seems too complex for what it might gives. I think id prefer with my current workaround (OnClientShow posted above).

Thanks,


Martin

[Marin Bratanov]

Hi Martin,

It is good to hear things are getting better. I would like to offer a few more useful methods - the tooltip offers the isVisible() method in its client-side API, so you can use that to check if it is already/still shown before modifying its position or hiding it. You may also find interesting the data chaching mechanism the manager offers to prevent duplicate requests for the same item, as it can save some bandwidth. More on that is available in this demo and at the end of this help article.


All the best,
Marin Bratanov
the Telerik team