ToolTip doesn't stay next to target control

[Johnathan]

Hello. I'm having an issue with the tooltip staying with its target control. There is some JS code that displays some hidden table cells that are above the target control for the tooltip & when this happens, the tooltip doesn't move with the target control. Below is the markup for the tooltip. Any help would be greatly appreciated.

<asp:TableRow>
    <asp:TableCell HorizontalAlign="right" Text="Product"></asp:TableCell>
    <asp:TableCell>
        <table>
            <tr>
                <td>
                    <asp:Label ID="Product" runat="server" CssClass="FieldValue"></asp:Label>
                </td>
                <td>
                    <span id="ProductMaintenanceSpan" runat="server" style="display:none; vertical-align:middle ">
                        <telerik:RadToolTip OnClientBeforeHide="OnClientBeforeHide"  ID="ProductToolTip" HideEvent="FromCode" Position="MiddleRight" style="z-index: -1;" TargetControlID ="ProductImage" runat="server" Text="Cancelled maintenance. Requires a PO for hourly work." RelativeTo="Element"></telerik:RadToolTip>
                        <asp:Image ID="ProductImage" ImageUrl="~/images/Info.gif" runat="server" style="cursor:pointer; vertical-align:middle" ImageAlign="TextTop"/>
                    </span>
                </td>
            </tr>
        </table>
    </asp:TableCell>
</asp:TableRow>

[Marin Bratanov]

Hello Johnathan,

This behavior is expected - the tooltip is an absolutely positioned div element, so it has set top and left offset. Thus, it cannot know what happens with the target and whether the target's absolute position changes in order to follow it, there are simply no browser events for that.

What I can suggest is calling the updateLocation() method of the tooltip. In case you have more than one instance where this can be needed, you can get the currently active tooltip as shown here: http://www.telerik.com/help/aspnet-ajax/tooltip-client-side-overview.html.


Regards,

Marin Bratanov
Telerik

 

 

[Johnathan]

Thanks Marin. Using the updatelocation() method fixed my original issue above.

However, I've run into another when using Firefox version 34.0.5. If you scroll down the page where the tooltip's target control isn't shown & click F5 to refresh, the page will reload at the last point viewed with the tooltip displayed at the top of the page but not next to the target control. I tried using the following JS code to call the updatelocation() function for the tooltip, but it doesn't work. Any help with correcting this would be greatly appreciated.

window.onload = function () {
    var ProductToolTip = $find("<%=ProductToolTip.ClientID%>");
    ProductToolTip.updateLocation();
};

[Marin Bratanov]

Hello Johnathan,

IScriptControls like our are available in the Sys.Application.Load event at the earliest, so window.onload is too early and the RadToolTip object is, most likely, null.

Thus, the code could look something like this:

function updateProductToolTipPosition() {
    var ProductToolTip = $find("<%=ProductToolTip.ClientID%>");
    if (ProductToolTip && ProductToolTip.isVisible()) {
        ProductToolTip.updateLocation();
    }
    Sys.Application.remove_load(updateProductToolTipPosition);
}
Sys.Application.add_load(updateProductToolTipPosition);

You could extend it to update any tooltip shown at the moment:

function updateProductToolTipPosition() {
    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (activeTooltip && activeTooltip.isVisible()) {
        activeTooltip.updateLocation();
    }
    Sys.Application.remove_load(updateProductToolTipPosition);
}
Sys.Application.add_load(updateProductToolTipPosition);

so it is more generic

Regards,

Marin Bratanov
Telerik

 

 

[Johnathan]

Hi Marin. I was finally able to get the following JS code to call the UpdateLocation() method for the tooltip, however, it still doesn't display correctly. If a user scrolls past the target control to where it isn't visible & hits F5 in Firefox, the tooltip still just displays at the top of the screen. If you have any other possible solutions, please let me know.

function updateProductToolTipPosition() {
    //alert("Product Tool Tip called!");
    var ProductToolTip = $find("<%=ProductToolTip.ClientID%>");
    if (ProductToolTip && ProductToolTip.isVisible()) {
        ProductToolTip.updateLocation();
        //alert("Location Updated!");
    }
}
setTimeout("updateProductToolTipPosition()", 1000);

[Marin Bratanov]

Hello,

A timeout cannot guarantee the Sys.Application.Load event has already fired, so I can suggest adding the timeout inside the handler:

function updateProductToolTipPosition() {
    var ProductToolTip = $find("<%=ProductToolTip.ClientID%>");
    setTimeout(function () {
        if (ProductToolTip && ProductToolTip.isVisible()) {
            ProductToolTip.updateLocation();
        }
    }, 1000);
    Sys.Application.remove_load(updateProductToolTipPosition);
}
Sys.Application.add_load(updateProductToolTipPosition);

The problem with refreshing after scrolling is that the browser can change the scroll position of the page, which cn cause the problem and I am not sure there is a possible workaround as the tooltip cannot know when the browser will scroll the page.


Regards,

Marin Bratanov
Telerik