ToolTip doesn't stay next to target control

6 posts, 0 answers
  1. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 16 Dec 2014 Link to this post

    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>
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 17 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 17 Dec 2014 in reply to Marin Bratanov Link to this post

    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();
    };
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 18 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 18 Dec 2014 in reply to Marin Bratanov Link to this post

    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);
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 19 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017