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

Telerik tooltip floating when page size changes

1 Answer 53 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
John asked on 22 Sep 2014, 04:19 PM

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.

1 Answer, 1 is accepted

Sort by
Marin Bratanov
Telerik team
answered on 24 Sep 2014, 12:08 PM

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.

Asked by
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question