I have a tooltip that works just great (pops up on top of the checkbox) until you scroll down far enough to where the tooltip has to be displayed under the content. This is where it gets interesting:
1) When 1st hover over content the tooltip shows up in the correct place (under the checkbox). Then if you scroll up and hover on content again the tooltip is on the right side, almost like it has position:TopRight applied.
2) When hover over content again the tooltip shows up under the content but is also on the right side, like it has position:BottomRight applied. (When scroll up and hover on content, the tooltip is in it's proper position)
How can I fix this problem? Thanks so much!
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wishListToolTip.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!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 runat="server">
<title>Wish List ToolTips</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" RelativeTo="Element" Position="TopLeft" Width="250" Height="50" AutoTooltipify="True" OffsetY="12" OffsetX="-400">
</telerik:RadToolTipManager><br> <br /><br /><br /><br /><br><br><br>
<asp:CheckBox ID="CheckBox7" runat="server" text="This is my placeholder text" ToolTip="This is my placesholder tooltip text" /><br /><br /><br> <br /><br /><br /><br /><br /><br /><br /><br /><br>
</form>
</body>
</html>8 Answers, 1 is accepted
Rank 1
This was a really good find! I was ably to easily reproduce it thanks your sample code. It seems to be a issue with the combination of the Position="TopLeft" attribute and the OffsetX="-400" attribute. From some reason the control is "forgetting" the -400 Offset. This may be a bug in the RadToolTip control. I would report it to Telerik ASAP. They may give you some Telerik points for the awesome find if it's actually a bug.
-Gimmik
Rank 1
Hello Megan,
The RadToolTip control has dynamic repositioning mechanism which calculates and sets new position if there is not enough space to be shown without overlapping the target. That is why before scrolling the page it shows above the target and when you scroll the page down, so that there is not enough space for the tooltip, it shows below the target.
However, since you have added OffsetX="-400" , the tooltip is forced to reposition itself again, this time not programmatically because of the repositioning mechanism explained above, but due to the browser boundary detection mechanism. As you see, this scenario with all these settings applied (the negative offset which goes outside the browser in especially) is actually more complicated then it initially seems.
There is also a design problem with this exact scenario - the repositioning is automatic and it is determined by the available space. However, the offset is explicitly set by the developer and at this point we cannot ascertain what the expected behavior should be in such scenario - should the tooltip go out of the screen due to set explicitly, should it take another position, should it take the default position, etc. We are aware that in such a complex case there might be issues with the positioning, but it is very difficult to cover all possible scenarios, especially when the expected behavior differs from one person to another and thus we have provided the client API for fine-tuning.
What I can suggest is the following:
1) Remove the offset or at least make it smaller, since it is actually designed for fine tuning.
2) Set the desired offset only for certain tooltips which really need it in your setup dynamically, through the client API (set_offsetX and set_offsetY methods) .
In order to provide further suggestions, we will need more detailed explanations about the exact desired result and we can try to provide some reasonable solution for you.
Regards,
Marin
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.
Rank 1
Hello Megan,
In your case the asp checkbox renders together with the text you declare and thus it is expected that the tooltip will position itself according to this whole element, not just to the checkbox box. This is also the reason why positioning the tooltip as you desire is not a task too easy.
What I can suggest is to set the Position property of the tooltip to Top Center (so that it does not reposition itself to top right if there is no room on the screen) and use CSS to horizontally position the callout above (or below, it there is no room above) the box.
For your convenience I created and attached a page that achieves this functionality with a very small amount of overriding the internal logic of the tooltip. Here is a video from my experiment: http://screencast.com/t/BAQeYBYpk. I hope this helps.
All the best,
Marin
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.
Rank 1
Hello Megan,
The checkbox element actually extends a few pixels below the checkbox itself due to letters such as "y", "j", "g", etc dropping below the baseline of the text. This is also the reason why the tooltip calculates that there is more room available and still positions itself above the element.
That being said - we have logged this scenario and we will try to improve the tooltip's behavior in it (which will prove to be a tricky task so as not to break the other functionality), and I cannot provide an estimate when and if it will be implemented.
Regards,
Marin
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.
Rank 1