Tooltip isn't positioning proper

[Justin Ellis]

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?

[Svetlina Anati]

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.

[Andy F.]

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.

[Svetlina Anati]

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.

[Andy F.]

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.

 

[Svetlina Anati]

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.

[Andy F.]

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.

[Svetlina Anati]

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.

[Andy F.]

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.

[Svetlina Anati]

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.

[Andy F.]

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.

[Svetlina Anati]

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.

[Andy F.]

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">

[Svetlina Anati]

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.

[Andy F.]

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);
        }