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

Loses position when scrolling

7 Answers 178 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Susan
Top achievements
Rank 1
Susan asked on 02 Aug 2008, 11:02 PM
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>

7 Answers, 1 is accepted

Sort by
0
Accepted
Svetlina Anati
Telerik team
answered on 04 Aug 2008, 03:29 PM
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.
0
Yevgeniya
Top achievements
Rank 2
answered on 13 Aug 2008, 05:57 PM
Hi, I have the same problem. Was this resolved? Or do I need to open a ticket?

Thanks,
Yevgeniya
0
Yevgeniya
Top achievements
Rank 2
answered on 13 Aug 2008, 05:58 PM
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
0
Yevgeniya
Top achievements
Rank 2
answered on 13 Aug 2008, 11:26 PM

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>

0
Sophy
Telerik team
answered on 15 Aug 2008, 01:03 PM
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.
0
Yevgeniya
Top achievements
Rank 2
answered on 18 Aug 2008, 06:20 PM
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
0
Tsvetie
Telerik team
answered on 21 Aug 2008, 12:56 PM
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.
Tags
ToolTip
Asked by
Susan
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Yevgeniya
Top achievements
Rank 2
Sophy
Telerik team
Tsvetie
Telerik team
Share this question
or