When tooltip show my window scroll to top

5 posts, 0 answers
  1. Acaz
    Acaz avatar
    9 posts
    Member since:
    Jan 2011

    Posted 27 Jan 2011 Link to this post

    When tooltip show my window scroll to top

    This happen in DEMO sometimes with this options:
    - Relative To: BROWSERWINDOW
    - Position: CENTER

    Why?
  2. Acaz
    Acaz avatar
    9 posts
    Member since:
    Jan 2011

    Posted 27 Jan 2011 Link to this post

    This problem happens in Tooltip DEMOS in Telerik UI Asp.net Ajax Q3 2010
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 27 Jan 2011 Link to this post

    Hi Acaz,

     I am not sure how you load the content but what you report is expected if you are using AJAX to load the content of the tooltip - when a partial update is done, the scroll position is lost and this is related to general ASP.NET and AJAX and it is not directly related to the tooltip but to how the things work (you can easily reproduce it by using a standard asp update panel and no RadControls at all).

    What I suggest is to save the scroll position before the OnAjaxUpdate event e.g in hidden fields and when the content is loaded to reset it back. You can find more information about this and also other techniques on how to persists the scroll position on the net, e.g you can start from here:

    http://www.google.bg/#hl=bg&source=hp&q=scroll+position+ajax&meta=&rlz=1R2WZPA_enBG347&aq=f&oq=scroll+position+ajax&fp=a0599798b4eb5972

    Regards,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Acaz
    Acaz avatar
    9 posts
    Member since:
    Jan 2011

    Posted 27 Jan 2011 Link to this post

    No, i'm not use ajax to load the tooltip, i'm do like a DEMO of Q3 2010. In this DEMO this error happens too.

    I correct this of another way.

    I use this CSS to replace the inline CSS of tooltip:

    #RadToolTipWrapper_ctl00_okTooltip[style]

     

     

    , #RadToolTipWrapper_ctl00_errorTooltip[style]
    {
    position:fixed !important;
    top:0 !important;
    }

    THIS:
    <body id="body" runat="server">

    AND THIS:

    <telerik:RadToolTip runat="server" ID="okTooltip" Width="280px" Height="70px"
    OffsetX="0" OffsetY="0" EnableShadow="true" IsClientID="true"
    EnableViewState="true" ShowCallout="false" AutoCloseDelay="5000"
    Skin="Default" Text="Operação realizada com sucesso!" RelativeTo="Element" Position="TopCenter" Animation="Fade" TargetControlID="body" ShowEvent="FromCode">
    </telerik:RadToolTip>

     

     

     

    <telerik:RadToolTip runat="server" ID="errorTooltip" Width="280px" Height="70px"
    OffsetX="0" OffsetY="0" EnableShadow="true" IsClientID="true"
    EnableViewState="true" ShowCallout="false" AutoCloseDelay="5000"
    Skin="Default" Text="Falha ao realizar operação." RelativeTo="Element" Position="TopCenter" Animation="Fade" TargetControlID="body" ShowEvent="FromCode">
    </telerik:RadToolTip>

    I put the tooltip relativeTo Element BODY,

    Is not the correct way, but this works perfectly.

     

  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Feb 2011 Link to this post

    Hello Acaz,

     I prepared a test page based on your code but unfortunately I was not able to reproduce the issue - here is my code for your reference:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            #RadToolTipWrapper_ctl00_okTooltip[style], #RadToolTipWrapper_ctl00_errorTooltip[style]
            {
                position: fixed !important;
                top: 0 !important;
            }
        </style>
    </head>
    <body id="body">
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
      
            function showTip()
            {
                var tip = $find("<%= okTooltip.ClientID%>");
                tip.show();
            }
          
        </script>
      
        <div style="width:200px; height:3000px">
        </div>
            <button onclick="showTip(); return false;">
            Show ToolTip</button>
        <telerik:RadToolTip runat="server" ID="okTooltip" Width="280px" Height="70px" OffsetX="0"
            OffsetY="0" EnableShadow="true" IsClientID="true" EnableViewState="true" ShowCallout="false"
            AutoCloseDelay="5000" Skin="Default" Text="Operação realizada com sucesso!" RelativeTo="Element"
            Position="TopCenter" Animation="Fade" TargetControlID="body" ShowEvent="FromCode">
        </telerik:RadToolTip>
        <telerik:RadToolTip runat="server" ID="errorTooltip" Width="280px" Height="70px"
            OffsetX="0" OffsetY="0" EnableShadow="true" IsClientID="true" EnableViewState="true"
            ShowCallout="false" AutoCloseDelay="5000" Skin="Default" Text="Falha ao realizar operação."
            RelativeTo="Element" Position="TopCenter" Animation="Fade" TargetControlID="body"
            ShowEvent="FromCode">
        </telerik:RadToolTip>
        </form>
    </body>
    </html>

    When I scroll to the bottom of the page and I show the tooltip, the page does not scroll to the top. Would you please test and let me know if I am doing something wrong or in  case other modifications should be applied?

    On a side note, You can achieve the same effect by setting RelativeTo="BrowserWindow" and Position="TopCenter" and this is the better way to configure the tooltip than overriding the CSS.

    Kind regards,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017