Tooltip isn't positioning proper

15 posts, 0 answers
  1. Justin Ellis
    Justin Ellis avatar
    1 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    I am using a tooltipManager display the information needed in the tooltip. The tooltip is shown when a row on a radGrid is clicked. I have the information loaded into the tooltipManager from the radGrid_ItemDataBind event but for some reason I can't get the tooltip to appear where I told it to. 

                <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server"
                    HideEvent="ManualClose" Modal="True"
                    onajaxupdate="RadToolTipManager1_AjaxUpdate" Position="Center"
                    ShowEvent="OnClick" ManualClose="True" OffsetY="0"
                    RelativeTo="BrowserWindow">
                </telerik:RadToolTipManager>

    It will occasionally show in the center but usually shows along the middle but not the center of the browser. Is there something I am missing or doing wrong?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Jan 2010 Link to this post

    Hi Justin,

    It is possible to get udesired position when there is not explicit width set and the OnAjaxUpdate event is used. However, this is expected behavior in such case - the content of the tooltip is loaded through AJAX and the tooltip cannot "predict" the width it has to have when it is shown. Thus it shows at some coordinates and after that the resize takes place and as a result the position is not the correct.

    This being said, you should set the Width property explicitly and to use the ContentScrolling property to the desired value in order to determine the behavior when the width should be bigger than the set. If you want the tooltip to resize accordingly you should set it to Default.

    We are currently working on improving this behavior but for the time being some explicit size set is the best solution for the case.


    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 06 Feb 2010 Link to this post

    A follow-up to this is that if you set only the width and not the height, the arrow is near the top of the box, because it's assuming a height of 0 instead of computing the correct box height.  Would be really great if this were improved.
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 10 Feb 2010 Link to this post

    Hi Andy F.,

    This is caused by the same fact as explained below and it will be also fixed when the sizing and positioning when loading content with AJAX without explicit size set is improved.

    Kind regards,
    Svetlina
    the Telerik team

    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
    Follow the status of features or bugs in PITS and vote for them to affect their priority.
  6. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 10 Feb 2010 Link to this post

    In case anyone else is looking, the following tip from another thread fixed my problem:

    Add OnClientShow="tipManager_Show" to the attributes of your ToolTipManager and then add this javascript code to handle adjusting the height to the correct height of the tip.

     

    function tipManager_Show(sender, args)  
    {  
        var popup = sender.get_popupElement();  
        var table = popup.getElementsByTagName("TABLE")[0];  
        popup.style.height = table.offsetHeight + "px";  

     
    My only concern is that this fix will get obsoleted by a change to the underlying RadToolTip rendering code.  But for now, it works great.

     

  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Feb 2010 Link to this post

    Hello Andy F.,

    You are correct that this will do the trick because it actually sets the needed height. However, if you are using OnAjaxUpdate event I strongly recommend to put this code in the OnClientResponseEnd client event because if the loading time of the content is bigger in the OnClientShow you will get 0 for the height which is not correct.

    Greetings,
    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.
  8. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 15 Feb 2010 Link to this post

    I just tried that, but the results from sender.get_popupElement() is null.  Also get null from sender.get_contentElement().  I probably need another hint at how to get the height to properly adjust when using OnAjaxUpdate.  Thanks.
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 18 Feb 2010 Link to this post

    Hi Andy F.,

    This is because the sender in the OnClientResponseEnd event is not the tooltip but the RadToolTipManager because it can only have this event since it provides functionality to load on demand and the separate tooltip does not.

    This being said, you should reference the current tooltip by using the "static" method getCurrent as shown below:

    function OnClientResponseEnd(sender, args)   
    {   
        var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
        var popup = tooltip.get_popupElement();   
        ......................................... 
    }  


    Best wishes,
    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.
  10. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 18 Feb 2010 Link to this post

    Hi Svetlina,

    Thanks for the hint, but it does not work.  With the code I posted, the arrow comes out at the bottom of the tooltip balloon, regardless of balloon height.  With the change you're recommending, the arrow comes out about 20 pixels from the top of the balloon, regardless of the balloon height.  I can understand the possible issue you describe, so would like to make sure this is done right.

    Please advise, thanks.

  11. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Feb 2010 Link to this post

    Hello Andy F.,

    Would you please try to execute the script with a little timeout, e.g you can try with 0ms as shown below:

    function OnClientResponseEnd(sender, args)
    {
      setTimeout(function(){
      var active = Telerik.Web.UI.RadToolTip.getCurrent();
      var width = active._tableElement.offsetWidth;
      active.set_width(width);
      active.get_popupElement().style.width = width + "px";
      }, 0);
    }




    Best wishes,
    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.
  12. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 23 Feb 2010 Link to this post

    Your example adjusts the width, not the height.  I need the height adjusted when the tip is displayed.  I made the obvious changes to your code to adjust the height instead, but it didn't do anything different (arrow still near the title of the tooltip area and not the bottom).

    Please advise.
  13. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 26 Feb 2010 Link to this post

    Hi Andy F.,

    I prepared for you a sample demo which sets the height - please find it attached. Indeed, it is also needed to call the _adjustCallout method, I apologize for not mentioning this but in my initial test demo the timeout was not that big and thus that worked on my side.

    Regards,
    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.
  14. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 01 Mar 2010 Link to this post

    Still not working right.  Please see screen shot attached.  Note where the arrow is located.  This is a tooltip located within a grid triggered by a hover over the grid line (which also highlights when you hover over it).

    Manager is declared with: 

     

    <telerik:RadToolTipManager Animation="Slide" AutoCloseDelay="0" runat="server" Position="TopCenter" RelativeTo="Mouse" ID="tipManager" HideEvent="LeaveTargetAndToolTip" ShowEvent="OnMouseOver" OnAjaxUpdate="tipManager_AjaxUpdate" OffsetY="-3" Width="200px" RenderInPageRoot="true" Title="Report Details" OnClientResponseEnd="tipManager_ClientResponseEnd" /> 

     

     

    And the GridDataItem for the row is added to TargetControls in the grid's ItemDataBound routine.  The tipManager_AjaxUpdate routine adds a Literal to the e.UpdatePanel.ControlTemplateContainer.Controls collection with the content to display.

    Don't know if this matters, but the grid also has this set: 

    <ClientSettings EnableRowHoverStyle="true"

  15. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Mar 2010 Link to this post

    Hi Andy F.,

    It seems that your scenario is complex and also there are differences between our setups. I believe that the best way to proceed is to open a new support ticket and send us a sample, fully working reproduction demo (make it as simple as possible and use a fake programmatic datasource for the grid) along with detailed reproduction steps, radControls version information, browser information and some screenshots. This will save round trips for gathering all the needed recreation information and we will be able to help you faster instead of preparing needless demos which work on our side but do not fix the issue on yours because they are missing your exact configurations.

    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.
  16. Andy F.
    Andy F. avatar
    42 posts
    Member since:
    May 2006

    Posted 09 Mar 2010 Link to this post

    For future reference if anyone else runs into this problem, here's the answer:

    To fix it you should execute the script with a timeout equal to the duration of the animation the tooltip uses. The default value of the animation duration is 500ms. For your convenience and for test purposes I changes it to 300ms and attached your demo to the thread. If you prefer to not explicitly set the AnimationDuration property you should use 500ms timeout.

    In other words, specify an explicit AnimationDuration on the RadToolTipManager and then use the same timeout in the ClientResponsEnd code, like this:
    function tipManager_ClientResponseEnd(sender, args)  
    {  
       setTimeout(function()  
       {  
          var active = Telerik.Web.UI.RadToolTip.getCurrent();  
          var height = active._tableElement.offsetHeight;  
          active.set_height(height);  
          active.get_popupElement().style.height = height + "px";  
          active._adjustCallout();  
       }, 300);  

    Postscript to the original solution:

    As the time to create the contents of the tooltip stretched past 1 second or so, the tooltip would end up being shown incorrectly positioned relative to its target position.  To correct for this, change the above code to:

            function tipManager_ClientResponseEnd(sender, args)  
            {  
                var active = Telerik.Web.UI.RadToolTip.getCurrent();  
                active._reSetToolTipPosition();   
     
                setTimeout(function()  
                {  
                    var active = Telerik.Web.UI.RadToolTip.getCurrent();  
                    var height = active._tableElement.offsetHeight;  
                    active.set_height(height);  
                    active.get_popupElement().style.height = height + "px";  
                    active._adjustCallout();  
                }, 350);  
            }  
     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017