Tooltip cropped

11 posts, 1 answers
  1. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 14 Jul 2011 Link to this post

    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:
    <%@ 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 ObjectByVal e As System.EventArgs) Handles Me.Load
            System.Threading.Thread.Sleep(100)
        End Sub
     
        Protected Sub RadToolTipManager1_AjaxUpdate(ByVal sender As ObjectByVal 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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 14 Jul 2011 Link to this post

    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

    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!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 14 Jul 2011 Link to this post

    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
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 19 Jul 2011 Link to this post

    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:
    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";
    }
    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

    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!

  6. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 20 Jul 2011 Link to this post

    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.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Jul 2011 Link to this post

    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

    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!

  8. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 20 Jul 2011 Link to this post

    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.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 21 Jul 2011 Link to this post

    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

    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!

  10. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 21 Jul 2011 Link to this post

    Hi Marin,

    I have raised a support ticket 446240
    Thank you for your help.
  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 25 Jul 2011 Link to this post

    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

    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!

  12. Kurniadi
    Kurniadi avatar
    22 posts
    Member since:
    Jan 2006

    Posted 28 Jul 2011 Link to this post

    Hi Marin,

    thank you so much for your persistance and patience. I consider this issue resolved.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017