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

function
RadToolTipManager_OnClientShow(sender, eventArgs) {
setTimeout(
function
() {
sender.updateLocation();
}, 500);
}

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

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

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

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

Thanks Rumen,
You updated script is giving me an Uncaught SyntaxError: Unexpected token )
I can't see why. please can you check.
Cheers
Jon
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

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