position changed when scroll

9 posts, 0 answers
  1. Megan
    Megan avatar
    12 posts
    Member since:
    Mar 2011

    Posted 23 May 2011 Link to this post

    Hi,
    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>
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 23 May 2011 Link to this post

    Hi Meghan,

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Megan
    Megan avatar
    12 posts
    Member since:
    Mar 2011

    Posted 24 May 2011 Link to this post

    Thanks for the reply Gimmick I just submitted a ticket so we shall see what comes of that
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 25 May 2011 Link to this post

    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.

  6. Megan
    Megan avatar
    12 posts
    Member since:
    Mar 2011

    Posted 25 May 2011 Link to this post

    I'm really not trying to do anything complicated.  I just want the tooltip to show above the checkbox as opposed to the end of the element (in this case the text).  Hence why the offset had to be so far over.  
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 26 May 2011 Link to this post

    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.

  8. Megan
    Megan avatar
    12 posts
    Member since:
    Mar 2011

    Posted 26 May 2011 Link to this post

    WOW thanks so much for the thorough answer Marin I didn't mean for you to go to all that trouble but it is greatly appreciated!  I got it to work pretty darn well.  There is just one thing I noticed with IE7 & 8 and I'm not sure if it can be changed.  When I scroll down to the point that the tooltip should pop under the element, it doesn't and instead it covers the element (please see attached screen shots).  If there is a solution for this that would be awesome if not, no worries.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 27 May 2011 Link to this post

    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.

  10. Megan
    Megan avatar
    12 posts
    Member since:
    Mar 2011

    Posted 27 May 2011 Link to this post

    That's alright Marin I appreciate all the help!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017