This is a migrated thread and some comments may be shown as answers.

Radtooltipmanager position problem

13 Answers 261 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Meng
Top achievements
Rank 1
Meng asked on 14 Dec 2012, 06:45 PM
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

13 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 17 Dec 2012, 03:33 PM
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.
0
Meng
Top achievements
Rank 1
answered on 17 Dec 2012, 09:35 PM
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);
}
0
Raghavendra Rao
Top achievements
Rank 1
answered on 17 Dec 2018, 10:21 AM

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 ?

 

0
Marin Bratanov
Telerik team
answered on 18 Dec 2018, 05:49 PM
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.
0
Raghavendra Rao
Top achievements
Rank 1
answered on 19 Dec 2018, 06:43 AM

Marin,

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

0
Jack
Top achievements
Rank 2
answered on 01 Aug 2019, 03:20 AM

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

0
Peter Milchev
Telerik team
answered on 05 Aug 2019, 10:50 AM

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.
0
Jack
Top achievements
Rank 2
answered on 10 Aug 2019, 03:16 AM

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

0
Rumen
Telerik team
answered on 12 Aug 2019, 02:20 PM
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.
0
Jack
Top achievements
Rank 2
answered on 13 Aug 2019, 10:14 AM

Thanks Rumen,

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

Cheers
Jon

 

0
Rumen
Telerik team
answered on 13 Aug 2019, 11:26 AM
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.
0
Jack
Top achievements
Rank 2
answered on 04 Sep 2019, 09:35 AM

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

0
Rumen
Telerik team
answered on 04 Sep 2019, 09:44 AM

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.
Tags
ToolTip
Asked by
Meng
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Meng
Top achievements
Rank 1
Raghavendra Rao
Top achievements
Rank 1
Jack
Top achievements
Rank 2
Peter Milchev
Telerik team
Rumen
Telerik team
Share this question
or