Last Updated: 30 Nov 2017 08:39 by ADMIN

With the latest version of Google Chrome 61 the tooltip is not positioning correctly when the page is scrolled down.


The tooltip positioning problem is due to the following breaking change in Chrome 61 (see release notes at

To align with the spec and preserve browser consistency, the scrollingElement is now the documentElement in standards mode.
Chrome 61 has changed the behavior of document.scrollingElement to return document.documentElement instead of document.body to match the CSSOM View specification and this broke the positioning of the tooltip.


Use the _getPosRelativeToMouse override to solve the problem:

<telerik:RadGrid ID="RadGrid" runat="server"></telerik:RadGrid>
<telerik:RadToolTipManager ID="RadToolTipManager1" AutoTooltipify="true" runat="server">
   Telerik.Web.UI.RadToolTip.prototype._getPosRelativeToMouse = function(targetBounds) {
                 var elemX = targetBounds.x;
                 var elemY = targetBounds.y;

                 //Get last recorded mouse position
                 var pos = this._getMousePosition();
                 var mouseX = pos.clientX;
                 var mouseY = pos.clientY;

                 //Take into consideration the offsetScroll!
                 var standard = $telerik.standardsMode;
                 //$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.version >= 61)) || (Telerik.Web.Browser.edge && Telerik.Web.Browser.version >= 15)) standard = false;

                 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 };
Last Updated: 17 Mar 2016 15:56 by ADMIN
Last Updated: 07 Jan 2016 12:04 by ADMIN
When a large page is scrolled to the target element, the tooltip is placed higher than expected.

Possible workaround is to use RelativeTo="Element" property.
Pending Review
Last Updated: 02 Feb 2016 09:27 by Osama
Created by: SUNIL
Comments: 1
Category: ToolTip
Type: Feature Request
There should be a method like GetRadWindowManager for RadToolTipManager called GetRadToolTipManager. This could be under the static $telerik.static library or as a global function that can be directly called without any prefixes.

The goal is to find the RadToolTipManager in an easy and transparent manner in any content page, otherwise one needs to get the id from master page and then use $find, which is not an easy and transparent way of getting the manager object.
Last Updated: 23 Nov 2015 13:02 by ADMIN
Created by: Marin Bratanov
Comments: 0
Category: ToolTip
Type: Bug Report
A possible workaround is to recalculate the positions in the OnClientShow event. Here is an example for the BottomCenter position

						function repositionCallout(sender, args) {
							var callout = $telerik.$(".rtCallout.rtCalloutTopCenter", sender.get_popupElement());
							if (callout.length > 0) { //there is a callout and its position is in the top center (i.e., tooltip's position is BottomCenter)
								var targetPos = $telerik.getBounds(sender.get_targetControl());
								var ttipPos = $telerik.getBounds(sender.get_popupElement());
								var calloutPos = $telerik.getBounds(callout[0]);
								var desiredCalloutLeft = targetPos.x - ttipPos.x + targetPos.width / 2 - calloutPos.width / 2;
								callout.css("left", desiredCalloutLeft);
					<telerik:RadToolTip ID="MainMenu" runat="server" TargetControlID="imgbtnMenuIcon" ShowEvent="OnClick" ShowDelay="0" AutoCloseDelay="0" Position="BottomCenter" RelativeTo="Element" RenderMode="Lightweight" Width="500px" Height="500px" OnClientShow="repositionCallout">
						tooltip content
Last Updated: 13 Apr 2019 08:35 by ADMIN
The RadTooltip and RadTooltipManager do not display tooltips like the default browser tooltips, if the tooltips are "nested".

Consider HTML like this

My name is <span class="app" title="Person Tooltip">Mathyß<a class="noteLink criticalRight" id="RqoTeiLink_a" title="Der Notelink Tooltip"><sup>a</sup></a> Schwertzenbachen</span>, and I live somewhere. 

If you tooltipify this HTML then only the "outer" tooltip is displayed all the time. When using just the browser, then it displays correctly the "inner" tooltip when you hover over the link.

As the behaviour is not consitent with the browser (and other Tooltip libraries) this should be fixed.
Last Updated: 22 Jul 2015 12:06 by ADMIN
When the tooltip is behind the modality it cannot be closed by the users. 

You can workaround this behavior by following the script below:

<telerik:RadButton runat="server" ID="RadButton1" Text="Hover"></telerik:RadButton>

<telerik:RadToolTip ID="rttAdditionalFeatures" runat="server" ManualClose="True" Modal="True"
    TargetControlID="RadButton1" ShowEvent="OnMouseOver" OnClientShow="OnClientShow">
    Some text

<script type="text/javascript">
    function OnClientShow(sender, args) {
        var modalLayerZindex =;

        if (sender.get_zIndex() <= modalLayerZindex) {
            sender.get_popupElement().style.zIndex = modalLayerZindex + 1;
Last Updated: 18 May 2015 12:47 by Elena
A workaround is to force the tooltip to update its position when the content arrives (i.e., in the OnClientResponseEnd event: )

function OnClientResponseEnd(sender, args) {
    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
    if (activeTooltip) {
Last Updated: 19 Jan 2015 11:34 by ADMIN
The issue stems from the content div element that has explicit background color. The loading sign is a background-image on the main tooltip wrapper, so having explicit height and/or scrolling causes the later element to hide the root element, thus, hiding the loading sign as well.

You can work around this by removing the explicit color declaration for all skins:

div.RadToolTip div.rtContent
	background-color: transparent;
Last Updated: 31 Mar 2020 12:33 by ADMIN
Created by: Marin Bratanov
Comments: 1
Category: ToolTip
Type: Feature Request
At present, when content arrives from one of the load-on-demand mechanisms in RadToolTipManager (AJAX request, web service, WCF web service), it is expected that it has static dimensions that match those set in the Width and Height property of the control.

Having an autosizing feature similar to RadWindow's should let it update its size (e.g., height by provided width) and position according to the new content when it arrives.

Samples are attached that showscase examples of resizing the tooltip once content arrives so you can use as base and implement similar resizing logic by calculating the dimensions of the content that came back.
Last Updated: 29 Sep 2015 10:36 by Alexander
Last Updated: 12 Sep 2014 11:30 by ADMIN
Created by: Marin Bratanov
Comments: 2
Category: ToolTip
Type: Feature Request
The request needs to be encoded for the WCF service context to be able to recognize the data as a class the developer can create.
A small sample is attached that:
- overrides a function from RadToolTipManager to encode the request
- has a simple WCF service implemented that shows how to access the passed data and use it
Last Updated: 14 Mar 2014 10:27 by Imported User
The workaround is to avoid the other settings (e.g., Auto). In most cases Lightweight RenderMode will suffice, the only potential issue is loss of gradients, shadows and rounded corners in IE6-8.
Last Updated: 26 Sep 2016 12:42 by ADMIN
In case the color difference is a problem, you can examine the rendered Classic tooltip and find the color CSS rule that is applied, then apply it to the Lightweight mode via a CSS selector similar to the following:
		div.RadToolTip_Simple .rtContent
			color: #C98400;
Where you can change Simple with the skin name that you are using.
Last Updated: 06 Apr 2015 14:38 by ADMIN
A possible workaround is to add the background-color via CSS:
		.RadToolTip_Office2007 div.rtContent
			background-color: #d7e3f2;

Last Updated: 15 May 2015 11:00 by Elena
When the following properties are set - HideEvent="LeaveToolTip" and RenderMode="LightWeight" and the mouse cursor is moved over the ToolTip in a slower motion, the tooltip itself is hidden.
Won't Fix
Last Updated: 15 May 2015 08:25 by ADMIN
The error that is thrown on page load is that two components with the same ID cannot be added to the page.

Possible workarounds:
1) set EnableAriaSupport to false
2) use client-side code to show tooltips, as shown in this demo: .
Last Updated: 01 Nov 2013 13:06 by ADMIN
Telerik version - 2011.1.614.35

RadToolTip issue seen on Chrome (version 28.0.1500.95) and Safari (version 5.1.7)

The RadToolTip doesn’t align properly with the control that was hidden initially.
i.  There is a label control inside the RadGrid header template, that has RadToolTip attached.
ii.  On page load, the column is hidden.
iii.  The column is made visible when a particular button is clicked (client side event).
iv.  When the cursor is hovered over this column for the first time, the tool tip is seen at a distant place away from the label.
v.  However, when hovered again, it is seen properly aligned with the label control
Last Updated: 05 Aug 2015 10:28 by Eric
No tooltip should be shown if there is no data for the tooltip:
- RadToolTipManager: AutoTooltipify=true; IgnoreAltAttribute=true; no title attribute set for the elements on the page: no tooltips should be generated, but empty ones are
- RadToolTip: IgnoreAltAttribute=true; no Text or content are set; no title attribute set on the target: no tooltip should be shown, but an empty one is

Leave your comments below on the behavior you would expect from this property.

Possible workarounds are attached to the thread.
1 2