This is a migrated thread and some comments may be shown as answers.

When tooltip show my window scroll to top

4 Answers 84 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Acaz
Top achievements
Rank 1
Acaz asked on 27 Jan 2011, 12:11 PM
When tooltip show my window scroll to top

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

Why?

4 Answers, 1 is accepted

Sort by
0
Acaz
Top achievements
Rank 1
answered on 27 Jan 2011, 12:19 PM
This problem happens in Tooltip DEMOS in Telerik UI Asp.net Ajax Q3 2010
0
Svetlina Anati
Telerik team
answered on 27 Jan 2011, 03:50 PM
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.
0
Acaz
Top achievements
Rank 1
answered on 27 Jan 2011, 05:05 PM
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.

 

0
Svetlina Anati
Telerik team
answered on 01 Feb 2011, 10:22 AM
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.
Tags
ToolTip
Asked by
Acaz
Top achievements
Rank 1
Answers by
Acaz
Top achievements
Rank 1
Svetlina Anati
Telerik team
Share this question
or