Hi,
I am trying to use tooltip with its content loaded dynamically (on demand), but the tooltip always gets cropped. After much investigation I found that this is due to a delay in page load event. I have managed to reproduce the issue simply by using Thread.Sleep placed in page Load event handler. Somewhere between 80 to 90 milliseconds is where the problem starts to appear. Below 80ms everything is good. When the tooptip gets cropped, what we see on screen is only the top part of the tooltip like about 10 pixels high, the rest looks like it is clipped. Please can anyone spot wherer I have gone wrong? or is this a bug? If it is when can I expect to have it fixed please? Is there a work around? Thank you.
This is my aspx code:
Here is my code behind file:
I am trying to use tooltip with its content loaded dynamically (on demand), but the tooltip always gets cropped. After much investigation I found that this is due to a delay in page load event. I have managed to reproduce the issue simply by using Thread.Sleep placed in page Load event handler. Somewhere between 80 to 90 milliseconds is where the problem starts to appear. Below 80ms everything is good. When the tooptip gets cropped, what we see on screen is only the top part of the tooltip like about 10 pixels high, the rest looks like it is clipped. Please can anyone spot wherer I have gone wrong? or is this a bug? If it is when can I expect to have it fixed please? Is there a work around? Thank you.
This is my aspx code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="TEST_Default" %> <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> <!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></title> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"></telerik:RadScriptManager> <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="BottomRight" RelativeTo="Mouse" Animation="Resize" HideEvent="LeaveTargetAndToolTip" Skin="WebBlue"> <TargetControls> <telerik:ToolTipTargetControl TargetControlID="viewAgentLink" /> </TargetControls> </telerik:RadToolTipManager> <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" CssClass="RadAjax" Transparency="60"> <div class="raDiv"></div> <div class="raColor raTransp"></div> </telerik:RadAjaxLoadingPanel> <asp:Label ID="viewAgentLink" runat="server" CssClass="agentLink">view agent details</asp:Label> </form> </body> </html>
Here is my code behind file:
Imports Telerik.Web.UI Partial Class TEST_Default Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load System.Threading.Thread.Sleep(100) End Sub Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As Object, ByVal e As Telerik.Web.UI.ToolTipUpdateEventArgs) Handles RadToolTipManager1.AjaxUpdate If e.TargetControlID = "viewAgentLink" Then Dim contentCtrl As Control = Page.LoadControl("AgentDetailsControl.ascx") e.UpdatePanel.ContentTemplateContainer.Controls.Add(contentCtrl) CType(sender, RadToolTipManager).Title = "Agent Details" End If End Sub End Class
PS: I have not included the usercontrol file/code, but you can use any user control with Lorem Ipsum text in it.
10 Answers, 1 is accepted
0
Hi Kurniadi,
I see that you have not set dimensions for your tooltips and this is why they are very small. If the content they are to display is received quickly enough while they are initializing they will compensate for this, but, as you noticed, if the loading takes more time they have no way of knowing how big they should render.
What I would advise is that you set the Width and Height properties to values close to the size you expect the content to be (if the exact value is known - even better).
There is a possible hack-ish type of workaround that allows you to resize the tooltips when the whole response is received, yet I would advise trying to anticipate the dimensions first. If that does not work for you let me know and I will send you the JavaScript functions.
Regards,
Marin
the Telerik team
I see that you have not set dimensions for your tooltips and this is why they are very small. If the content they are to display is received quickly enough while they are initializing they will compensate for this, but, as you noticed, if the loading takes more time they have no way of knowing how big they should render.
What I would advise is that you set the Width and Height properties to values close to the size you expect the content to be (if the exact value is known - even better).
There is a possible hack-ish type of workaround that allows you to resize the tooltips when the whole response is received, yet I would advise trying to anticipate the dimensions first. If that does not work for you let me know and I will send you the JavaScript functions.
Regards,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Kurniadi
Top achievements
Rank 1
Rank 1
answered on 15 Jul 2011, 04:46 AM
Thanks Marin. But the idea is to have many tooptips on the page and and load them on demand. hence the use of tooptip manager rather than individual tooptip for each one. So setting tooltip size before hand is not practical.
Is there a way to make the tooptips auto resize depending on content loaded?
Or else if I opt for individual tooltips control for each tooltip, is there a way to load the contents on demand?
Regards,
Rudy
Is there a way to make the tooptips auto resize depending on content loaded?
Or else if I opt for individual tooltips control for each tooltip, is there a way to load the contents on demand?
Regards,
Rudy
0
Accepted
Hello Rudy,
I asked if it was possible in your scenario, since sometimes a uniform user control is loaded and its dimensions are known beforehand. If it is not you can use the following JavaScript to first prevent it from showing then when the whole content is received to set its size according to the content's dimensions:
where these functions are attached to the OnClientResponseEnd and OnClientShow events of the RadToolTipManager.
As for the RadToolTip - it does not support loading content on demand, only the RadToolTipManager does. The closest you can get is by using the set_text() method and obtaining the string via a custom web service or a callback.
Kind regards,
Marin
the Telerik team
I asked if it was possible in your scenario, since sometimes a uniform user control is loaded and its dimensions are known beforehand. If it is not you can use the following JavaScript to first prevent it from showing then when the whole content is received to set its size according to the content's dimensions:
function OnClientResponseEnd() { setTimeout(function () { var active = Telerik.Web.UI.RadToolTip.getCurrent(); var width = active._tableElement.offsetWidth; var height = active._tableElement.offsetHeight; active.set_width(width); active.set_height(height); active.get_popupElement().style.width = ""; active.get_popupElement().style.height = ""; active._show(); active._adjustCallout(); }, 100); } function OnClientShow(sender, args) { sender.get_popupElement().style.display = "none"; }As for the RadToolTip - it does not support loading content on demand, only the RadToolTipManager does. The closest you can get is by using the set_text() method and obtaining the string via a custom web service or a callback.
Kind regards,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Kurniadi
Top achievements
Rank 1
Rank 1
answered on 20 Jul 2011, 09:20 AM
Thanks Marin. I think we are getting there. The javascript code successfully adjusts the size of tooltips. However as soon as it appears it disappears again. Looks like onClientShow event keeps getting called, though I have tried holding the mouse as perfectly still as I can over the target link.
0
Hello Kurniadi,
Please make sure that you have set all the necessary properties such as ShowEvent, HideEvent, Position, RelativeTo, as I do not see a ShowEvent in your initial snippet. Also, does this behavior occur only if this property is missing, or if you set it as well? If you are experiencing this issue only under FireFox please try setting a higher value for the AnimationDuration property, since Firefox has issues with elements that are animated and resized - it does not calculate sizes properly and fires the mouseout and mouseover events continuously. Well, actually you could try it anyway, not under FF only.. You could also try removing the animation at all to see if this helps. If you are still unable to resolve this I would advise preparing and sending us a simple, runnable project that isolates your case so we can debug it locally and see what is happening.
Greetings,
Marin
the Telerik team
Please make sure that you have set all the necessary properties such as ShowEvent, HideEvent, Position, RelativeTo, as I do not see a ShowEvent in your initial snippet. Also, does this behavior occur only if this property is missing, or if you set it as well? If you are experiencing this issue only under FireFox please try setting a higher value for the AnimationDuration property, since Firefox has issues with elements that are animated and resized - it does not calculate sizes properly and fires the mouseout and mouseover events continuously. Well, actually you could try it anyway, not under FF only.. You could also try removing the animation at all to see if this helps. If you are still unable to resolve this I would advise preparing and sending us a simple, runnable project that isolates your case so we can debug it locally and see what is happening.
Greetings,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Kurniadi
Top achievements
Rank 1
Rank 1
answered on 21 Jul 2011, 02:41 AM
Hi Marin,
You're right I was using default for ShowEvent. I have tried changing this to OnClick, but still does not make a difference.
I am using IE8 mainly. I have also tried on FF and Chrome. On FF it behaves slightly better in that the tooltip shows a little longer before it finally disappears by itself after a brief delay. On IE8 and Chrome it just blinks - on and then off very quickly.
As I mentioned, I put a breakpoint on OnClientShow event handler and it does get hit repeatedly which explains why the tooltip keeps disappearing.
Can you tell me how I can send you some example files? The attachment on this forum only allows images.
You're right I was using default for ShowEvent. I have tried changing this to OnClick, but still does not make a difference.
I am using IE8 mainly. I have also tried on FF and Chrome. On FF it behaves slightly better in that the tooltip shows a little longer before it finally disappears by itself after a brief delay. On IE8 and Chrome it just blinks - on and then off very quickly.
As I mentioned, I put a breakpoint on OnClientShow event handler and it does get hit repeatedly which explains why the tooltip keeps disappearing.
Can you tell me how I can send you some example files? The attachment on this forum only allows images.
0
Hello Kurniadi,
You would need to open a support ticket where you can attach a simple, runnable project that we can inspect. For your convenience I created a short video illustrating the approach. It would be helpful if you could specify the browser that causes this behavior, the exact version of our controls, the steps you take to reproduce the behavior and if the project is simple enough so that it can be run directly.
Thank you for your patience and cooperation.
All the best,
Marin
the Telerik team
You would need to open a support ticket where you can attach a simple, runnable project that we can inspect. For your convenience I created a short video illustrating the approach. It would be helpful if you could specify the browser that causes this behavior, the exact version of our controls, the steps you take to reproduce the behavior and if the project is simple enough so that it can be run directly.
Thank you for your patience and cooperation.
All the best,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
0
Hi Kurniadi,
I have answered your ticket on the matter, yet for your convenience and for others that may encounter the same issue I am pasting my reply below:
The issue stems from the fact that you have Animation enabled. It causes the OnClientShow event to be fired later (after the animation) and at this point the response is already received and there is no code that will show the tooltip again.
What I can suggest are the following options:
1) Remove the animation at all, since hiding the tooltip and the hacked resizing will not be animated anyway
2) leave the animation on and remove the OnClientShow handler, so that the tooltip will only be resized once the response is received. This approach may sometimes look smoother, yet I cannot guarantee that it will work correctly in all cases and scenarios, escpecially since having some explicit dimensions may cause the content that is loaded to take on some peculiar size and aspect ratio which you may not like. You can examine this behavior in the video I recorded during my experiment: http://screencast.com/t/1Oaq3fD6Vo5L.
All the best,
Marin
the Telerik team
I have answered your ticket on the matter, yet for your convenience and for others that may encounter the same issue I am pasting my reply below:
The issue stems from the fact that you have Animation enabled. It causes the OnClientShow event to be fired later (after the animation) and at this point the response is already received and there is no code that will show the tooltip again.
What I can suggest are the following options:
1) Remove the animation at all, since hiding the tooltip and the hacked resizing will not be animated anyway
2) leave the animation on and remove the OnClientShow handler, so that the tooltip will only be resized once the response is received. This approach may sometimes look smoother, yet I cannot guarantee that it will work correctly in all cases and scenarios, escpecially since having some explicit dimensions may cause the content that is loaded to take on some peculiar size and aspect ratio which you may not like. You can examine this behavior in the video I recorded during my experiment: http://screencast.com/t/1Oaq3fD6Vo5L.
All the best,
Marin
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
0
Kurniadi
Top achievements
Rank 1
Rank 1
answered on 28 Jul 2011, 09:52 AM
Hi Marin,
thank you so much for your persistance and patience. I consider this issue resolved.
thank you so much for your persistance and patience. I consider this issue resolved.