tooltip changes its position

2 posts, 0 answers
  1. prayag ganoje
    prayag ganoje avatar
    127 posts
    Member since:
    Feb 2010

    Posted 06 Jul 2011 Link to this post


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

    please see attached images for more clarity.
  2. Marin Bratanov
    Marin Bratanov avatar
    3908 posts

    Posted 07 Jul 2011 Link to this post

    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.get_popupElement().style.width = "";
            active.get_popupElement().style.height = "";
        }, 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.

    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!

Back to Top