Radtooltipmanager position problem

[Meng]

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

[Marin Bratanov]

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

[Meng]

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

}

[Raghavendra Rao]

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 ?

 

[Marin Bratanov]

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:

• upgrade to the latest version where there are no known issues in the RadToolTip positioning logic
• review the following KB on external factors (like application-level CSS) that can still break positions: https://www.telerik.com/support/kb/aspnet-ajax/details/incorrect-positioning-of-controls

 

Regards,
Marin Bratanov
Progress Telerik

[Raghavendra Rao]

Marin,

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

[Jack]

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

[Peter Milchev]

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

[Jack]

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

[Rumen]

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

[Jack]

Thanks Rumen,

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

Cheers
Jon

 

[Rumen]

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

[Jack]

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

[Rumen]

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