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
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.
Rank 2
Thanks,
Yevgeniya
Rank 2
Thanks,
Yevgeniya
Rank 2
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>
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 |
| { |
| position: relative; |
| } |
| </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.
Rank 2
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
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:
- (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,
Tsvetiethe Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.