tooltip changes its position

[prayag ganoje]

Hello,

I was using a tooltip for radgrid. On mouse over on radgrid row tooltip pops up.

After loading the dynamic data in tooltip, it changes its position and moves up. Becase of this this tooltip points to some other row in radgrid which is misleading.

note:- its ovserved posiotion change of tooltip happens when tooltip is at end of the web page below.

I would like the tooltip should not move or though it move it should point to the exact row of radgrid.

Can you please suggest me the best way to achieve this ?

tooltip code:

<telerik:RadToolTipManager ID="ttm_CSMD_Backlog_By_Status_FL" runat="server" EnableShadow="true"
    Animation="Fade"   OnAjaxUpdate="OnAjaxUpdate" HideEvent="ManualClose"  AnimationDuration="2000"
    Position="BottomRight"  RelativeTo="Element" OffsetY="0" OnClientResponseEnd="OnClientResponseEnd">
</telerik:RadToolTipManager>

please see attached images for more clarity.

[Marin Bratanov]

Hello Prayag,

This may happen when the tooltip does not have a proper size set. In its show event it positions itself according to the initial size it has, then it has to resize when the whole response is received. At this point, though, the callout and position are already set and thus they appear wrong when the tooltip repositions itself so that it stays in the screen.

What I would advise is that you set its dimensions to match the expected size. In case the dimensions change, though, you may need to override is functionalitty a bit. I prepared two JavaScript functions for you that cause it to display only when the whole response is received and it should be positioned correctly then:

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 respectively.

Please note that this hack may not function well with animations.


Greetings,
Marin
the Telerik team