Telerik tooltip floating when page size changes

2 posts, 0 answers
  1. John
    John avatar
    2 posts
    Member since:
    Sep 2014

    Posted 22 Sep 2014 Link to this post


    I am using telerik tooltip in my application with many web pages. It works perfectly fine for the web pages with less height. However for a few pages which have more height and have scrolling bars, tooltip floats around and does not stick to its target control. For example, even if the target control is on top of the page, tooltip shows at the bottom of the page where the user can even see the target control. Is there a way we can set position of tooltip to fixed on top of the target control ?

    My code : 
     <asp:TextBox ID="tbtest" BorderColor="White" BorderWidth="0px" placeholder="My first name"
                                                runat="server" AutoCompleteType="Disabled" CssClass="textboxStyle" ></asp:TextBox>
                                            <telerik:RadToolTip runat="server" HideEvent="ManualClose" ShowEvent="FromCode" Width="150px"
                                                Position="TopCenter" RelativeTo="Element" IsClientID="true" TargetControlID="tbtest" OnClientShow="OnClientShow"
                                                ID="tbtestToolTip" Height="50 px" EnableEmbeddedSkins="false" Skin="MyCustomSkin" ClientIDMode="Static"  >
                                                    Testing message here.
  2. Marin Bratanov
    Marin Bratanov avatar
    3562 posts

    Posted 24 Sep 2014 Link to this post

    Hi John,

    The tooltip should position itself according to its target in the common case and you can see this in action here: so you can compare the demo with your actual code. With the provided information the other ideas I can suggest are the following:

    • set the RenderInPageRoot property to true to avoid inheriting CSS from its parents as much as possible
    • remove the ClientIDMode=Static because the static mode is not supported
    • increase the height to accommodate the content and avoid the space between the value and the "px": - see the very first section.
    • make sure there are no JavaScript errors on the page
    • try the built-in skins, as it is possible that some customization in the MyCustomSkin skin affects its positioning.

    I hope these ideas will help you resolve the case.


    Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top