Radtooltipmanager position problem

14 posts, 1 answers
  1. Meng
    Meng avatar
    57 posts
    Member since:
    Apr 2011

    Posted 14 Dec 2012 Link to this post

    Hi there,

    "The RadToolTip's designed behavior is to show always in the visible browser area. Therefore, when it should exceed the screen bounds it recalculates its coordinates and reposition."

    The above statement is not always true, please see the attached screenshot. When the tooltipmanager showing up, 80% of the time it does the reposition, but sometimes not, the bottom part of the tooltipmanager is hidden from the bottom of the screen, i need to scroll down to see the entire tooltip.

    Any suggestions?

    Thanks,
    Meng
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4939 posts

    Posted 17 Dec 2012 Link to this post

    Hi Meng,

    The following thread contains a lot of ideas on fixing such position/size related issues: http://www.telerik.com/community/forums/aspnet-ajax/tooltip/radtooltipmanager-issues-in-some-browsers.aspx. My replies on the second issue described in the thread contain the options (updateLocation(), _adjustCallout(), configuring the manager properly, several more complex JavaScript functions). The most likely reason for the behavior you experience is not having sufficient dimensions set in the manager's declaration, so the content expands the popup once it arrives.


    Kind regards,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Meng
    Meng avatar
    57 posts
    Member since:
    Apr 2011

    Posted 17 Dec 2012 Link to this post

    Thanks for your reply, Marin. The issue was resolved after I added the following function:

    function RadToolTipManager_OnClientShow(sender, eventArgs) {
        setTimeout(function () {
            sender.updateLocation();
        }, 500);
    }
  4. Raghavendra Rao
    Raghavendra Rao avatar
    2 posts
    Member since:
    Jun 2017

    Posted 17 Dec 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    Added the below code and therefore it worked fine 

     

     Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function (targetBounds) {
                    debugger;
                    var elemX = targetBounds.x;
                    var elemY = targetBounds.y;

                    //Get last recorded mouse position
                    //var pos = this.getmouseposition(e);
                    var mouseX = xvalue;
                    var mouseY = yvalue;

                    //Take into consideration the offsetScroll!
                    var standard = $telerik.standardsMode;
                    //console.log($telerik)
                    //$telerik.standardsMode does not do a good job! Extra check is needed for FF!!
                    //And yet another check needed for Safari! It should always be set to false in order to get the calculations right
                    if (!$telerik.isIE && document.compatMode != "CSS1Compat") standard=false;
                    //else if ($telerik.isSafari && !(Telerik.Web.Browser.chrome && Telerik.Web.Browser.version >= 61)) standard=false;
                    else if ($telerik.isSafari && !($telerik.isChrome)) standard = false;
                    //var standard = true;
                    if (standard) {
                        elemX -= $telerik.getCorrectScrollLeft(document.documentElement);
                        elemY -= document.documentElement.scrollTop;
                    }
                    else //NEW: Add support for quircksmode
                    {
                        elemX -= $telerik.getCorrectScrollLeft(document.body);
                        elemY -= document.body.scrollTop;
                    }

                    //Calculate the position of the mouse, relative to the targetcontrol
                    var deltaX = (mouseX - elemX);
                    var deltaY = (mouseY - elemY);

                    return { x: deltaX, y: deltaY };
                }
            });

            function getmouseposition(event) {
                xvalue = event.clientX;
                yvalue = event.clientY;
                //var coor = "X coords: " + xvalue + ", Y coords: " + yvalue;
                //document.getElementById("demo").innerHTML = coor;)
                //console.log(coor);
            }

    The above code is working fine and its showing me the right tool tip when the page is steady and shows the same tooltip when it's scrolled.

    But the problem is I've deployed the same code in DEV environment and its working fine for some systems and not working for some system.

    I don't understand what is the issue. Could you please let me know where is the gap ?

     

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4939 posts

    Posted 18 Dec 2018 Link to this post

    Hi Raghavendra,

    My best guess is that some caching is in play and the systems where you still experience issues have a cached older version of your scripts that does not contain the new override.

    I also recommend that you:

     


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Raghavendra Rao
    Raghavendra Rao avatar
    2 posts
    Member since:
    Jun 2017

    Posted 19 Dec 2018 in reply to Marin Bratanov Link to this post

    Marin,

    I've cleared entire caching in client system and therefore it worked fine. Thanks for the support :)

  7. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 31 Jul Link to this post

    Hi Raghavendra Rao,

    I've been trying to fix this for almost a year now but just cannot get the tooltips to position correctly.

    Please could you show how and where you have placed the code for your fix?

    Cheers, Jon

  8. Peter Milchev
    Admin
    Peter Milchev avatar
    615 posts

    Posted 05 Aug Link to this post

    Hello Jack,

    You can place the script under the ScriptManager on the page. Other things you can try are: 

    1) Wrap the overwrite code in condition 

    if (Telerik.Web.UI.RadToolTip){
       // overwrite code here...
    }

    2) Check for any JavaScript errors in the browser console.

    If the issues persist, please prepare a small runnable sample with the tooltip manager and send it to us in an official support ticket. That would allow us to investigate locally your exact scenario and provide more accurate and specific suggestions.

    You can mention this ticket also so once we have a resolution in the support ticket, we can share the solution here, for convenience and better visibility from the community.

    Regards, Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 09 Aug in reply to Peter Milchev Link to this post

    Thank you Peter,

    No luck I'm afraid.
    I've placed the script under the script manager as you say, but I'm not sure if I've done it correctly.
    This is done in a master page.

    Are you able to paste in the entire scripts needed to show me please?

    Cheers,
    Jon

  10. Rumen
    Admin
    Rumen avatar
    14101 posts

    Posted 12 Aug Link to this post

    Hi Jon,

    Here is an example:

    <asp:ScriptManager id="ScriptManager1" runat="server" />
    <script>
    if (Telerik.Web.UI.RadToolTip) {
        Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function (targetBounds) {
                    debugger;
                    var elemX = targetBounds.x;
                    var elemY = targetBounds.y;
     
                    //Get last recorded mouse position
                    //var pos = this.getmouseposition(e);
                    var mouseX = xvalue;
                    var mouseY = yvalue;
     
                    //Take into consideration the offsetScroll!
                    var standard = $telerik.standardsMode;
                    //console.log($telerik)
                    //$telerik.standardsMode does not do a good job! Extra check is needed for FF!!
                    //And yet another check needed for Safari! It should always be set to false in order to get the calculations right
                    if (!$telerik.isIE && document.compatMode != "CSS1Compat") standard=false;
                    //else if ($telerik.isSafari && !(Telerik.Web.Browser.chrome && Telerik.Web.Browser.version >= 61)) standard=false;
                    else if ($telerik.isSafari && !($telerik.isChrome)) standard = false;
                    //var standard = true;
                    if (standard) {
                        elemX -= $telerik.getCorrectScrollLeft(document.documentElement);
                        elemY -= document.documentElement.scrollTop;
                    }
                    else //NEW: Add support for quircksmode
                    {
                        elemX -= $telerik.getCorrectScrollLeft(document.body);
                        elemY -= document.body.scrollTop;
                    }
     
                    //Calculate the position of the mouse, relative to the targetcontrol
                    var deltaX = (mouseX - elemX);
                    var deltaY = (mouseY - elemY);
     
                    return { x: deltaX, y: deltaY };
                }
            });
     
            function getmouseposition(event) {
                xvalue = event.clientX;
                yvalue = event.clientY;
                //var coor = "X coords: " + xvalue + ", Y coords: " + yvalue;
                //document.getElementById("demo").innerHTML = coor;)
                //console.log(coor);
            }
    }
    </script>


    If you experience problems, you can test it on a standard aspx page to see whether it works and there are not any JS errors in the DevTools console.

    Best Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 13 Aug in reply to Rumen Link to this post

    Thanks Rumen,

    You updated script is giving me an Uncaught SyntaxError: Unexpected token )
    I can't see why. please can you check.

    Cheers
    Jon

     

  12. Rumen
    Admin
    Rumen avatar
    14101 posts

    Posted 13 Aug Link to this post

    Thank you for letting me know for the error!

    There were some extra brackets. Please try this out:

    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <script>
        if (Telerik.Web.UI.RadToolTip) {
            Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function (targetBounds) {
                debugger;
                var elemX = targetBounds.x;
                var elemY = targetBounds.y;
     
                //Get last recorded mouse position
                //var pos = this.getmouseposition(e);
                var mouseX = xvalue;
                var mouseY = yvalue;
     
                //Take into consideration the offsetScroll!
                var standard = $telerik.standardsMode;
                //console.log($telerik)
                //$telerik.standardsMode does not do a good job! Extra check is needed for FF!!
                //And yet another check needed for Safari! It should always be set to false in order to get the calculations right
                if (!$telerik.isIE && document.compatMode != "CSS1Compat") standard = false;
                //else if ($telerik.isSafari && !(Telerik.Web.Browser.chrome && Telerik.Web.Browser.version >= 61)) standard=false;
                else if ($telerik.isSafari && !($telerik.isChrome)) standard = false;
                //var standard = true;
                if (standard) {
                    elemX -= $telerik.getCorrectScrollLeft(document.documentElement);
                    elemY -= document.documentElement.scrollTop;
                }
                else //NEW: Add support for quircksmode
                {
                    elemX -= $telerik.getCorrectScrollLeft(document.body);
                    elemY -= document.body.scrollTop;
                }
     
                //Calculate the position of the mouse, relative to the targetcontrol
                var deltaX = (mouseX - elemX);
                var deltaY = (mouseY - elemY);
     
                return { x: deltaX, y: deltaY };
            }
        }
        function getmouseposition(event) {
            xvalue = event.clientX;
            yvalue = event.clientY;
            //var coor = "X coords: " + xvalue + ", Y coords: " + yvalue;
            //document.getElementById("demo").innerHTML = coor;)
            //console.log(coor);
        }
    </script>

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Jack
    Jack avatar
    143 posts
    Member since:
    May 2003

    Posted 04 Sep in reply to Rumen Link to this post

    Thank you Rumen,

    Sorry for the delay. I've tested it everywhere and everyway I can.
    It is better, but at times - that I cannot pinpoint - it reverts back to jumping around.

    The only errors (violations) I can see are - and these are sporadic.

    [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

    I guess I need to upgrade to the latest version but its a lot just to fix the tooltip.
    Thanks for the support, I'll keep trying to nail it down.

    Jon

  14. Rumen
    Admin
    Rumen avatar
    14101 posts

    Posted 04 Sep Link to this post

    Hi Jon,

    It is always better to use the latest version because it provides not only bug fixes but also support for the latest browser versions.

    You may find useful to review the following resources which will help you to decide whether to upgrade to the latest and greatest version:

    • The Known Issues and Important Changes sticky thread. It lists changes that may affect your code and known regression issues (that are usually fixed in the subsequent release). Review the information for the releases you go through so you can evaluate whether you will be affected by anything.

       

    • The Telerik Upgrade API Analyzer can analyze your C# code to notify you of changes between your version and the new version you want to upgrade to. It offers information as of the Q1 2012 (2012.1.225) release.

       

    • UI for ASP.NET AJAX Release History—reviewing the release notes for all releases you go through will let you see what has changed, what fixes, features and controls have been implemented so you are better prepared to meet your project's challenges.

       

     

    Regards,
    Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top