<telerik:RadToolTip ID="uxRadToolTip" runat="server" Height="80px" Width="250px"
RelativeTo="BrowserWindow" Position="Center" ShowEvent="FromCode" Modal="true">
In Chrome, when you scroll down to the bottom of the page(the href which triggers this popup is on the top of the window now), click the href which triggers this popup, then you could see the backgroud is locked which is correct, but we can't see the popup itself(It's ok in IE67 and firefox23, but not in Chrome.).
Could you give me any suggestion?
6 Answers, 1 is accepted
Thank you for reporting this problem, I was able to reproduce it and logged it in our database for fixing. For the time being I suggest to capture the OnClientBeforeShow event, check whether the browser is Chrome and reposition the tooltip to the desired coordinates.
I updated your account with 500 Telerik points for reporting this problem.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

I am having the same issue with Tooltip in chrome. I am using Q3 2009. Can you please provide sample code to reposition tooltip in Tooltip_OnBeforeShow.
I am generating Tooltips from client side and so don't have any tooltip ID etc..

You can reposition a tooltip in the following manner;
function
OnClientBeforeShow(sender, args)
{
sender.set_offsetX(10);
sender.set_offsetY(10);
}
If this does not help, please provide sample reproduction code which is fully runnable along with very detailed explanations and screenshots and we will do our best to help.
All the best,
Svetlina
the Telerik team

Sorry your code didn't work.
I tried to attach my solution but your website doesn't allow that. Please provide me your email if you need full solution or here are the steps to reproduce the problem. It will only take 2 minutes.
1) Just create a new website in VS 2010. Copy the following code in default.aspx and web.config.
2) Add a reference to Telerik.Web.UI.dll (Q3 2009) and run the default.aspx in chrome.
PROBLEM: The tooltip will be ok if you mouseover the table cells but it lose it's relative position once you scroll down the page and then mouseover the cells. Sometimes it won't appear and sometimes it will appear at the top of page.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"HeaderContent"
runat
=
"server"
ContentPlaceHolderID
=
"HeadContent"
>
</
asp:Content
>
<
asp:Content
ID
=
"BodyContent"
runat
=
"server"
ContentPlaceHolderID
=
"MainContent"
>
<
script
type
=
"text/javascript"
>
function showToolTip(element, text) {
var tooltipManager = $find("<%= ToolTipManager1.ClientID %>");
//If the user hovers the image before the page has loaded, there is no manager created
if (!tooltipManager) return;
//Find the tooltip for this element if it has been created
var tooltip = tooltipManager.getToolTipByElement(element);
//Create a tooltip if no tooltip exists for such element
if (!tooltip) {
tooltip = tooltipManager.createToolTip(element);
tooltip.set_text(text);
}
//Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
element.onmouseover = null;
tooltip.set_animation("Fade");
//show the tooltip
tooltip.show();
}
function Tooltip_OnBeforeShow(sender, eventArgs) {
sender.set_offsetX(10);
sender.set_offsetY(10);
}
</
script
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"ScriptManager1"
></
telerik:RadScriptManager
>
<
h2
>
Telerik Tooltip disappers in chrome Telerik Q3 2009.
</
h2
>
<
p
>
<
br
/><
br
/><
br
/><
br
/><
br
/><
br
/><
br
/><
br
/><
br
/>
<
table
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
><
p
>Line 1</
p
></
div
></
td
></
tr
>
<
tr
><
td
><
div
style
=
" width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>Line 2</
div
></
td
></
tr
>s
</
table
>
</
div
>
</
p
>
<
p
>
</
p
>
<
telerik:RadToolTipManager
ID
=
"ToolTipManager1"
runat
=
"server"
Position
=
"BottomCenter"
AutoTooltipify
=
"true"
Animation
=
"Resize"
RelativeTo
=
"Element"
OnClientBeforeShow
=
"Tooltip_OnBeforeShow"
HideDelay
=
"0"
>
</
telerik:RadToolTipManager
>
</
asp:Content
>
<?
xml
version
=
"1.0"
?>
<!--
For more information on how to configure your ASP.NET application, please visit
-->
<
configuration
>
<
connectionStrings
>
<
add
name
=
"ApplicationServices"
connectionString
=
"data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true"
providerName
=
"System.Data.SqlClient"
/>
</
connectionStrings
>
<
system.web
>
<
compilation
debug
=
"false"
targetFramework
=
"4.0"
/>
<
authentication
mode
=
"Forms"
>
<
forms
loginUrl
=
"~/Account/Login.aspx"
timeout
=
"2880"
/>
</
authentication
>
<
membership
>
<
providers
>
<
clear
/>
<
add
name
=
"AspNetSqlMembershipProvider"
type
=
"System.Web.Security.SqlMembershipProvider"
connectionStringName
=
"ApplicationServices"
enablePasswordRetrieval
=
"false"
enablePasswordReset
=
"true"
requiresQuestionAndAnswer
=
"false"
requiresUniqueEmail
=
"false"
maxInvalidPasswordAttempts
=
"5"
minRequiredPasswordLength
=
"6"
minRequiredNonalphanumericCharacters
=
"0"
passwordAttemptWindow
=
"10"
applicationName
=
"/"
/>
</
providers
>
</
membership
>
<
profile
>
<
providers
>
<
clear
/>
<
add
name
=
"AspNetSqlProfileProvider"
type
=
"System.Web.Profile.SqlProfileProvider"
connectionStringName
=
"ApplicationServices"
applicationName
=
"/"
/>
</
providers
>
</
profile
>
<
roleManager
enabled
=
"false"
>
<
providers
>
<
clear
/>
<
add
name
=
"AspNetSqlRoleProvider"
type
=
"System.Web.Security.SqlRoleProvider"
connectionStringName
=
"ApplicationServices"
applicationName
=
"/"
/>
<
add
name
=
"AspNetWindowsTokenRoleProvider"
type
=
"System.Web.Security.WindowsTokenRoleProvider"
applicationName
=
"/"
/>
</
providers
>
</
roleManager
>
<
httpHandlers
>
<
add
path
=
"Telerik.Web.UI.WebResource.axd"
type
=
"Telerik.Web.UI.WebResource"
verb
=
"*"
validate
=
"false"
/>
</
httpHandlers
>
</
system.web
>
<
system.webServer
>
<
modules
runAllManagedModulesForAllRequests
=
"true"
/>
</
system.webServer
>
</
configuration
>
Thanks!
-----
Thank you for the provided code, I was able to reproduce the issue on my side with the mentioned version of RadControls. Since this issue is already fixed, the best solution is to upgrade but you say that you can't do so, so I prepared a workaround for you:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
asp:Content
ID
=
"HeaderContent"
runat
=
"server"
ContentPlaceHolderID
=
"HeadContent"
>
</
asp:Content
>
<
asp:Content
ID
=
"BodyContent"
runat
=
"server"
ContentPlaceHolderID
=
"MainContent"
>
<
script
type
=
"text/javascript"
>
function showToolTip(element, text)
{
var tooltipManager = $find("<%= ToolTipManager1.ClientID %>");
//If the user hovers the image before the page has loaded, there is no manager created
if (!tooltipManager) return;
//Find the tooltip for this element if it has been created
var tooltip = tooltipManager.getToolTipByElement(element);
//Create a tooltip if no tooltip exists for such element
if (!tooltip)
{
tooltip = tooltipManager.createToolTip(element);
tooltip.set_targetControl(element);
tooltip.set_text(text);
}
//Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
element.onmouseover = null;
tooltip.set_animation("Fade");
//show the tooltip
tooltip.show();
}
$telerik.oldGetLocation = $telerik.getLocation;
$telerik.getLocation = function (element)
{
var position = $telerik.oldGetLocation(element);
if ($telerik.isSafari)
{
var doc = element && element.ownerDocument ? element.ownerDocument : document;
var pageScrollTop = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
var pageScrollLeft = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
if (pageScrollTop > 0 || pageScrollLeft > 0)
{
var forms = doc.documentElement.getElementsByTagName("form");
if (forms && forms.length > 0)
{
var formPos = Sys.UI.DomElement.getLocation(forms[0]);
if (formPos.y && formPos.y <
0
)
{
position.y += pageScrollTop;
}
if (formPos.x && formPos.x < 0)
{
position.x += pageScrollLeft;
}
}
}
}
return position;
};
</script>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"ScriptManager1"
>
</
telerik:RadScriptManager
>
<
h2
>
Telerik Tooltip disappers in chrome Telerik Q3 2009.
</
h2
>
<
p
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
table
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #D5E5E4;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
<
p
>
Line 1</
p
>
</
div
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
div
style
=
"width: 600px; height: 50px; background-color: #EFEFEF;"
onmouseover
=
"showToolTip(this,'this is tool tip')"
>
Line 2</
div
>
</
td
>
</
tr
>
s
</
table
>
</
p
>
<
p
>
</
p
>
<
telerik:RadToolTipManager
ID
=
"ToolTipManager1"
runat
=
"server"
Position
=
"BottomCenter"
ShowEvent
=
"FromCode"
RelativeTo
=
"Element"
HideDelay
=
"0"
>
</
telerik:RadToolTipManager
>
</
asp:Content
>
Please, note the following things:
1) The workaround overrides an internal getLocation method which is not recommended and might cause issues in later upgrades and thus I recommend to upgrade instead of using workaround.
2) There was a closing </div> tag without a starting one and I removed it. Please, examine your code for such invalid HTML because this can cause unexpected behavior.
3) If you create and show the tooltips on the client you do not need to have AutoTooltipify set to true but ShowEvent="FromCode".
I hope that my reply is helpful, let me know how it goes.
All the best,
Svetlina
the Telerik team