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

Tooltip right border missing/displaced

9 Answers 235 Views

ToolTip

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

Stephan asked on 09 Jun 2009, 08:23 AM

Hello,
I found a similar thread but without instructive answer. We use latest version Q1 2009.

The right border of the tooltip (via the tooltipmanager) is hidden behind content. It seems that the border is displaced by 1 or 2 pixels. We show the tooltip in a RadGrid for which we implemented a custom skin. The problem can be reproduced with any skin for the tooltipmanager.

By looking at the rendered HTML code and style inheritence I was not able to find a fix. However I found this:
- The control renders the "rtWrapper"-table with a width of 450px
- The rtWrapperContent-td contains a div with width of 448px
- However, the rtWrapperLeft and Right classes have a computed width of 3px
- If I sum up left, content, right I get a total width of 454 pixels instead of 450px
- Somehow, the tooltip borders are rendered slightly "rounded" (hence the 3px and not 1px)

I had extactly the same problem with the FormDecorator. Here too, the right border got lost. This time not inside our custom RadGrid style. We dropped the form decorator for that reason.

9 Answers, 1 is accepted

answered on 12 Jun 2009, 08:16 AM

Hi Telerik team,

To reproduce this problem I use this code (I have some general stylesheets loaded in the page so no idea whether this has an impact)

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="true" EnableScriptGlobalization="true" />
    <telerik:RadToolTipManager ID="RadToolTipLink" runat="server" ContentScrolling="Auto" Sticky="true"
               Skin="Default" ShowDelay="0" OffsetY="0"
               ShowCallout="false" ShowEvent="FromCode" VisibleOnPageLoad="true" RelativeTo="Element" Position="BottomCenter"
               Width="450px" Height="200px">
       <TargetControls>
           <telerik:ToolTipTargetControl TargetControlID="Form1" />
       </TargetControls>
       <WebServiceSettings Method="DummyMethod" Path="dummy.asmx" />
   </telerik:RadToolTipManager>

THE REASON WHY I BELIEVE THIS IS A BUG IN THE CONTROL:

- If you leave the web service in, the border disappears
- If you take out the web service line <WebServiceSettings> then the border is ok
- I am quite sure that this has something to do with the ajax loading panel

answered on 12 Jun 2009, 08:57 AM

Hello Stephan,

We have the very same demo with a WebService which is available below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/webservice/defaultcs.aspx

As you can see there, the borders of the RadToolTips are OK. Would you please make sure that you have set enough Width for the RadToolTipManager? Please, try setting a bigger width, e.g 600px and test again. If this fixes the issue, please find the best required width, in case this does not help, please open a new support ticket and send us a sample, fully runnable reproduction demo along with detailed reproduction steps and explanations and some screenshots.

Regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 06 May 2010, 05:40 PM

Hi,

I'm also missing a border on my tooltip.
I'm using telerik:RadToolTip directly on my aspx page as below.
And fill the content of the tooltip on the code behind...
It works on IE 8 but not on IE7 and IE6???

Any idea.

Please let me know.

Regards

R.

<asp:Image ID="imgLegend" runat="server" style="cursor: pointer" ImageUrl="../Common/Images/calLegend.gif" />

<telerik:RadToolTip ID="rttLegend" TargetControlID="imgLegend" Width="190px" RelativeTo="Element"

Position="BottomRight" ContentScrolling="Auto" Skin="Web20" AutoCloseDelay="60000"

runat="server" ManualClose="True">

</telerik:RadToolTip>

answered on 06 May 2010, 10:02 PM

In the meantime I learned to live with it. We added a JS hack that adds the border.

The problem occurs when you set ContentScrolling="Auto". Remove ContentScrolling and it works fine.

If you need the content scrolling you can call the following JS method after the tooltip is shown. E.g. if you use a web service to load contents you would call the JS on OnClientResponseEnd:

<telerik:RadToolTipManager ID="RadToolTipLink" runat="server" ContentScrolling="Auto"

OnClientResponseEnd="tooltipBorderHack"

function tooltipBorderHack(sender, args)

{

var current = Telerik.Web.UI.RadToolTip.getCurrent();

if (current) current.updateLocation();

}

Good luck,

Stephan

answered on 10 May 2010, 12:39 PM

Hello guys,

Please, note that the RadToolTipManager and the RadToolTip are not the same control - the OnClientResponseEnd event is used and implemented only for a RadToolTipManager and thus I cannot see how it worked in the case of Rachid since he is using a separate RadToolTip which does not have such an event except for in case he has switched to using the manager. To better understand the functional differences between the two controls and choose which fits better your needs, please examine the following demo:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/tooltipversustooltipmanager/defaultcs.aspx

As to the particular problem with the right border, we have found and fixed two problems with which are as follows:

1) FIX: The right border of the tooltip is not visible while the content is being loaded on demand /this means that the RadToolTipManager is used/. This fix was released Q1 2010 SP1 as listed below:

http://www.telerik.com/products/aspnet-ajax/whats-new/release-history/q1-2010-sp1-version-2010-1-415.aspx

This being said, if you have explicit and enough big width set and you are using the mentioned version everything should work fine.

2) FIX: When ContentScrolling is different than Default, the right border of the RadToolTip is not shown - this is about a separate RadToolTip and it is exactly the case Rachid describe. This problem is also now fixed and the fix will be available in the next internal build.

I hope that the provided explanations and information are helpful, in case you reproduce the issue in cases different than the above, pp,ease share fully runnable reproduction code and we will examine the setup and we will do our best to help.

Sincerely yours,
Svetlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 10 May 2010, 02:25 PM

Hello Stephan,

Indeed, the javascript in question operates on a separate tooltip but the time you execute it is not correct - the OnClientResponseEnd event of the manager is fired when the response is already returned due to using loading on demand. The separate tooltip, however, does not have such an event because its content is usually static and you do not detect the response on demand - thus you can execute this code e.g in the OnClientShow event of a separate tooltip with a timeout if needed. However, if the tooltip needs more time to show which might happen in some scenarios and / or on some machines, it is possible that this javascript is executed earlier then needed and also setting a big timeout just to ensure this will not happen is a waste and the benefit is smaller. On the other hand, when using the OnClientResponseEnd you have more control and fine-tuning. This being said, I wanted to emphasize on the differences and on the fact that this solution might work in some cases but it is not universal for all cases when the separate tooltip is used and it is better to upgrade to the fixed version of RadControls where the fox is more reliable and extensively tested.

Thank you for sharing your solutions in our forums and for your kind cooperation, we highly appreciate it!

Sincerely yours,
Svetlina
the Telerik team