Loses position when scrolling

8 posts, 1 answers
  1. Susan
    Susan avatar
    137 posts
    Member since:
    Jul 2007

    Posted 02 Aug 2008 Link to this post

    I am using the tooltip for prometheus and IE. I have narrowed the problem down to scrolling. I have a registration form which goes byond the limits of the screen so there is a scrollbar on the rightside. If I tab thru the fields, the tooltip on all the fields visible on the current screen works fine. Then I scroll down. When i place my cursor in one of the fields, the tooltip either is way up top, not next to the element, or sometimes, not present at all.

    Thanks so much.
    Susan

    Here is my tooltip code:

    <telerik:RadToolTipManager runat="server" ID="RadToolTip5"

    ShowEvent="OnFocus"

    OnClientShow="OnClientShow"

    Skin="Vista"

    ShowDelay="100"

    AutoCloseDelay="5000"

    Width="300px"

    Position="MiddleRight"

    RelativeTo="Element">

    <TargetControls>

    <telerik:ToolTipTargetControl TargetControlID="CustomerName" />

    <telerik:ToolTipTargetControl TargetControlID="BillAddress1" />

    <telerik:ToolTipTargetControl TargetControlID="BillCity" />

    <telerik:ToolTipTargetControl TargetControlID="BillState" />

    <telerik:ToolTipTargetControl TargetControlID="BillZip" />

    <telerik:ToolTipTargetControl TargetControlID="HomePhoneNumber" />

    <telerik:ToolTipTargetControl TargetControlID="WorkPhoneNumber" />

    <telerik:ToolTipTargetControl TargetControlID="CellPhoneNumber" />

    <telerik:ToolTipTargetControl TargetControlID="Last4SSN" />

    <telerik:ToolTipTargetControl TargetControlID="FaxNumber" />

    <telerik:ToolTipTargetControl TargetControlID="EmailAddress" />

    <telerik:ToolTipTargetControl TargetControlID="UserId" />

    <telerik:ToolTipTargetControl TargetControlID="Password" />

    <telerik:ToolTipTargetControl TargetControlID="ShipAddress1" />

    <telerik:ToolTipTargetControl TargetControlID="ShipCity" />

    <telerik:ToolTipTargetControl TargetControlID="ShipState" />

    <telerik:ToolTipTargetControl TargetControlID="ShipZip" />

    <telerik:ToolTipTargetControl TargetControlID="NameOnCard" />

    <telerik:ToolTipTargetControl TargetControlID="CardNumber" />

    <telerik:ToolTipTargetControl TargetControlID="CVV2Code" />

    </TargetControls>

    </telerik:RadToolTipManager>

  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Aug 2008 Link to this post

    Hello Susan,

    There was such a problem when the RadToolTip is in quirksmode but it was soon fixed. Therefor I suggest to make sure that you are using the proper DOCTYPE declaration, which is the default one when you create a new WebForm, as shown below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     

    Also, make sure that there are not any blank lines or commented code before this declaration.

    In case this does not help, please open a new support ticket and provide a fully working reproduction demo along with a detailed explanation of the reproduction steps and a video capture, if possible. Once I receive it, I will do my best to help.

    Best wishes,
    Svetlina
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 13 Aug 2008 Link to this post

    Hi, I have the same problem. Was this resolved? Or do I need to open a ticket?

    Thanks,
    Yevgeniya
  5. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 13 Aug 2008 Link to this post

    I guess my problem is that when I scroll, the tool tip moves with the page, leaving the element it was tied to. Is there something that can be done about it? I use the same doc type you suggested.

    Thanks,
    Yevgeniya
  6. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 13 Aug 2008 Link to this post

    Hi again,

    I traced my problem (tooltip leaving its original position and scrolling with the page) to having a tooltip inside the RadSplitter and RadPane. See the code below. How do I get around this problem?

    Thanks,

    Yevgeniya

    <%

    @ Page Language="C#" AutoEventWireup="true" CodeBehind="InfoFlyout.aspx.cs" Inherits="Sandbox.InfoFlyout" %>
    <%
    @ 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">

    <

    html xmlns="http://www.w3.org/1999/xhtml" >
    <
    head id="Head1" runat="server">
    <title>Untitled Page</title>
    </head>
    <
    body>
    <
    form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <telerik:RadSplitter ID="RadSplitter1" runat="server" >
        
    <telerik:RadPane runat="server" ID="txsfsdf">

            <a runat="server" id="uxmylink" href="about:blank;" target="_self">Read</a>

            <telerik:RadToolTip runat="server"     ID="uxtesttip"     ManualClose="true"  ShowEvent="OnClick" Position="BottomRight" TargetControlID="uxmylink">
    </telerik:RadToolTip>

    <!-- content to cause scrolling -->


    <
    br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br />
    </telerik:RadPane>
    </telerik:RadSplitter>
    </
    form>
    </
    body>
    </
    html>

  7. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 15 Aug 2008 Link to this post

    Hi Yevgeniya,

    Could you please explain in more details what is the result you expect and the one you currently observe? You say that "tool tip moves with the page, leaving the element it was tied to". Running the code snippet you have sent us I noticed that the tooltip does not move when scrolling the page but stays at its original position and therefore it leaves the element it is tied to as the element is scrolled with the page. This behavior is result of the positioning of the RadToolTip and that of the RadSplitter's pane. If you want to make the tooltip scroll with the rest of the pane's content I suggest you add the following css style between the head tags of the page:

    <style type="text/css">     
    .RadSplitter_Default .pane div,        
    .RadSplitter_Default .paneHorizontal div        
    {        
        positionrelative;        
    }       
    </style>   
     
     
    More detailed information about this issue you can find in this KB article.
    Let us know if you need further assistance.

    Best wishes,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Yevgeniya
    Yevgeniya avatar
    15 posts
    Member since:
    Mar 2008

    Posted 18 Aug 2008 Link to this post

    Hi Sophy,

    Yes, you are correct. My problem is that my tool tip does not scroll together with the page but stays put. I tried out the solution you suggested along with the solutions in the KB article. It worked only if tooltip did not contain any data in it. As soon as something was added to tool tip content, tool tip once again stopped scrolling with the page.

    Is there something I need to modify in the tool tip skin?

    You can see this happening if you use your solution with  my previous code snippet and adding     Text="my tool tip"     to the toop tip manager declaration.

    Are there any other solutions?

    Thanks,
    Yevgeniya
  9. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Aug 2008 Link to this post

    Hello Yevgeniya,
    I already answered your other ticket with the same question. I will give the information here as well, so that it is available to all, who might run into the same problem:
    ***

    The problem is that in this case, the RadToolTip is added as a child of the FORM element, so that it can apprear on top of all other elements on the page. That is why, I can suggest that you take one of the following approaches:
    1. (recommended)Handle the scroll event of the DIV element, holding the content of the RadPane, and close the active tooltip:
      <script type="text/javascript">  
      function OnClientLoaded(sender, args)  
      {  
          var pane = sender.getPaneById('<%= txsfsdf.ClientID %>');  
          var contentElement = pane.getContentElement();  
          var tooltip = $find('<%= uxtesttip.ClientID %>');  
          contentElement.onscroll = function()  
          {  
              if(tooltip && tooltip.isVisible())  
              {  
                  tooltip.hide();  
              }  
          };  
      }  
      </script>  
       <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoaded">  
          <telerik:RadPane runat="server" ID="txsfsdf">  
               <a runat="server" id="uxmylink" href="about:blank;" target="_self">Read</a>  
               <telerik:RadToolTip runat="server" ID="uxtesttip" ManualClose="true" Text="my text" 
                  ShowEvent="OnClick" Position="BottomRight" TargetControlID="uxmylink">  
               </telerik:RadToolTip> 

    ***

    Another possible approach is to update the location of the tooltip when you scroll:

    <script type="text/javascript">  
    function OnClientLoaded(sender, args)  
    {  
        var pane = sender.getPaneById('<%= txsfsdf.ClientID %>');  
        var contentElement = pane.getContentElement();  
        var tooltip = $find('<%= uxtesttip.ClientID %>');  
        contentElement.onscroll = function()  
        {  
            if(tooltip && tooltip.isVisible())  
            {  
                tooltip.updateLocation();  
            }  
        };  
    }  
    </script>  
     <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="OnClientLoaded">  
        <telerik:RadPane runat="server" ID="txsfsdf">  
             <a runat="server" id="uxmylink" href="about:blank;" target="_self">Read</a>  
             <telerik:RadToolTip runat="server" ID="uxtesttip" ManualClose="true" Text="my text" 
                ShowEvent="OnClick" Position="BottomRight" TargetControlID="uxmylink" 
                RelativeTo="Element">  
             </telerik:RadToolTip> 

    Kind regards,

    Tsvetie
    the Telerik team


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017