Hello
There is a problem with tooltip position when page where its shown have scroll , and scroll position is not 0.
Same behaviour where found at your examples :
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/ClientSideAPI/DefaultCS.aspx
Scroll it down as much as possible , so you will see the Submit button on the top of the screen and press on it. you will see that the tooltip will be shown much higher that it supposed to be.
My guess it does not takes the offsetHeight when it shows , only the client cursor position.
How can the issue be resolved, since i have found it on several website i have used the tooltip.
Best regards
Yulian
There is a problem with tooltip position when page where its shown have scroll , and scroll position is not 0.
Same behaviour where found at your examples :
http://www.telerik.com/DEMOS/ASPNET/Prometheus/ToolTip/Examples/ClientSideAPI/DefaultCS.aspx
Scroll it down as much as possible , so you will see the Submit button on the top of the screen and press on it. you will see that the tooltip will be shown much higher that it supposed to be.
My guess it does not takes the offsetHeight when it shows , only the client cursor position.
How can the issue be resolved, since i have found it on several website i have used the tooltip.
Best regards
Yulian
16 Answers, 1 is accepted
0
Hello yulian_o,
The described problem is not related to the RadToolTip control but to the way the browser behaves when the button is clicked. You can easily test this by removing the RadToolTip from your code and test the same scenario - you will notice that the browser page "jumps" up.
This being said, in case you want to handle this, you should add specific code which is standard and not related to RadControls.
Best regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The described problem is not related to the RadToolTip control but to the way the browser behaves when the button is clicked. You can easily test this by removing the RadToolTip from your code and test the same scenario - you will notice that the browser page "jumps" up.
This being said, in case you want to handle this, you should add specific code which is standard and not related to RadControls.
Best regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
yulian_o
Top achievements
Rank 1
Rank 1
answered on 15 Apr 2008, 08:49 PM
Hello once again
My problem is not with page but with the problem that Tooltip is shown in incorrect position.In your example with scroll you can not even see the tooltip,same happens with my webites.
When i ask tooltip to be shown on the bottom of some element , it should be shown there and not 400-500 pixels higher
Best regards
Yulian
My problem is not with page but with the problem that Tooltip is shown in incorrect position.In your example with scroll you can not even see the tooltip,same happens with my webites.
When i ask tooltip to be shown on the bottom of some element , it should be shown there and not 400-500 pixels higher
Best regards
Yulian
0
Hello yulian_o,
We suggest to reset the RadToolTip's target control on every show.
Concerning our online example, the modifications would be:
All the best,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
We suggest to reset the RadToolTip's target control on every show.
Concerning our online example, the modifications would be:
- Remove the TargetControlID setting form the RadToolTip's markup declaration:
<telerik:RadToolTip runat="server" ID="RadToolTip1" Position="TopRight" ManualClose="true" Width="300px" OnClientBeforeShow="CheckIfShow" - Modify the client-side function which shows the tooltip in the following manner:
function ShowTooltip() { window.setTimeout(function() { var tooltip = $find("RadToolTip1"); //API: show the tooltip var button = $get("btnSubmit"); tooltip.set_targetControl(button); tooltip.show(); window.setTimeout(function(){tooltip.set_targetControl(null);},100); }, 10); }
All the best,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
yulian_o
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2008, 02:08 PM
I have did what you asked me to do , but no luck.
The tooltip is not shown.
The problem is that my tooltip is inside dataList.
Here is ItemTemplate :
<asp:HiddenField ID="doorID" Value='<%#Bind("doorID")%>' runat="server" />
<asp:Image AlternateText='<%#Bind("doorName")%>' CssClass="clickableArea" ToolTip='<%#Bind("doorName")%>' runat="Server" ID="doorPreview" Height="200" />
<script language="Javascript">
function CloseToolTip<%#Container.ItemIndex%>()
{
//once a comment has been posted, close the RadToolTip
var tooltip = $find('<%#Container.FindControl("tltType").ClientID%>');
tooltip.hide();
}
function ShowTooltip<%#Container.ItemIndex%>()
{
window.setTimeout(function()
{
var tooltip = $find('<%#Container.FindControl("tltType").ClientID%>');
//API: show the tooltip
var button = $find('<%#Container.FindControl("doorPreview").ClientID%>');
tooltip.set_targetControl(button);
tooltip.show();
window.setTimeout(function(){tooltip.set_targetControl(null);},100);
}, 10);
}
</script>
<telerik:RadToolTip Animation="Resize" ManualClose="true" HideDelay="1000" runat="server" ID="tltType">
<table cellpadding="0" cellspacing="0" border="0" dir="rtl">
<tr>
<td class="blackBold" nowrap>בחר סוג דלת:</td>
<td width="5"> </td>
<td align="center">
<asp:DropDownList ID="lstType" CssClass="Input" runat="server">
<asp:ListItem Text="דלת רגילה" Value="0"></asp:ListItem>
<asp:ListItem Text="דלת כפולה" Value="1"></asp:ListItem>
<asp:ListItem Text="דלת וחצי" Value="2"></asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr><td height="5"></td></tr>
<tr><td colspan="3">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><asp:ImageButton ID="btnClose" CommandName="Close" ImageUrl="./Images/Buttons/Cancel.jpg" runat="server" /></td>
<td width="5"> </td>
<td><asp:ImageButton ID="btnSubmit" CommandName="SetType" ImageUrl="./Images/Buttons/Confirm.jpg" runat="server" /></td>
</tr>
</table>
</td></tr>
</table>
</telerik:RadToolTip>
And here is server side dataBound event , that attaches the required function to image :
protected void doorsList_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
if (DataBinder.Eval(e.Item.DataItem, "defaultHandleID").ToString().Length > 0)
((Image)e.Item.FindControl("doorPreview")).ImageUrl = "./previewHandle.aspx?preview=true&colorID=" + DataBinder.Eval(e.Item.DataItem, "colorID").ToString() + "&handleID=" + DataBinder.Eval(e.Item.DataItem, "defaultHandleID").ToString();
else
((Image)e.Item.FindControl("doorPreview")).ImageUrl = "./Upload/Colors/" + DataBinder.Eval(e.Item.DataItem, "imageURL").ToString().Trim();
((Label)e.Item.FindControl("lblPriceValue")).Text = ((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice")).ToString("f2") +" ₪";
((Label)e.Item.FindControl("lblHalfPriceValue")).Text = (((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice"))*HalfCoef).ToString("f2") + " ₪";
((Label)e.Item.FindControl("lblDoublePriceValue")).Text = (((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice"))*DoubleCoef).ToString("f2") + " ₪";
((Image)e.Item.FindControl("doorPreview")).Attributes.Add("onclick","ShowTooltip" + e.Item.ItemIndex.ToString() + "()");
}
}
When i call the functions , nothing happens, no javascript error is shown and function is executed.
Also if i place alert after calling show i am reaching the code.
best regards
Yulian
The tooltip is not shown.
The problem is that my tooltip is inside dataList.
Here is ItemTemplate :
<asp:HiddenField ID="doorID" Value='<%#Bind("doorID")%>' runat="server" />
<asp:Image AlternateText='<%#Bind("doorName")%>' CssClass="clickableArea" ToolTip='<%#Bind("doorName")%>' runat="Server" ID="doorPreview" Height="200" />
<script language="Javascript">
function CloseToolTip<%#Container.ItemIndex%>()
{
//once a comment has been posted, close the RadToolTip
var tooltip = $find('<%#Container.FindControl("tltType").ClientID%>');
tooltip.hide();
}
function ShowTooltip<%#Container.ItemIndex%>()
{
window.setTimeout(function()
{
var tooltip = $find('<%#Container.FindControl("tltType").ClientID%>');
//API: show the tooltip
var button = $find('<%#Container.FindControl("doorPreview").ClientID%>');
tooltip.set_targetControl(button);
tooltip.show();
window.setTimeout(function(){tooltip.set_targetControl(null);},100);
}, 10);
}
</script>
<telerik:RadToolTip Animation="Resize" ManualClose="true" HideDelay="1000" runat="server" ID="tltType">
<table cellpadding="0" cellspacing="0" border="0" dir="rtl">
<tr>
<td class="blackBold" nowrap>בחר סוג דלת:</td>
<td width="5"> </td>
<td align="center">
<asp:DropDownList ID="lstType" CssClass="Input" runat="server">
<asp:ListItem Text="דלת רגילה" Value="0"></asp:ListItem>
<asp:ListItem Text="דלת כפולה" Value="1"></asp:ListItem>
<asp:ListItem Text="דלת וחצי" Value="2"></asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr><td height="5"></td></tr>
<tr><td colspan="3">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><asp:ImageButton ID="btnClose" CommandName="Close" ImageUrl="./Images/Buttons/Cancel.jpg" runat="server" /></td>
<td width="5"> </td>
<td><asp:ImageButton ID="btnSubmit" CommandName="SetType" ImageUrl="./Images/Buttons/Confirm.jpg" runat="server" /></td>
</tr>
</table>
</td></tr>
</table>
</telerik:RadToolTip>
And here is server side dataBound event , that attaches the required function to image :
protected void doorsList_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
{
if (DataBinder.Eval(e.Item.DataItem, "defaultHandleID").ToString().Length > 0)
((Image)e.Item.FindControl("doorPreview")).ImageUrl = "./previewHandle.aspx?preview=true&colorID=" + DataBinder.Eval(e.Item.DataItem, "colorID").ToString() + "&handleID=" + DataBinder.Eval(e.Item.DataItem, "defaultHandleID").ToString();
else
((Image)e.Item.FindControl("doorPreview")).ImageUrl = "./Upload/Colors/" + DataBinder.Eval(e.Item.DataItem, "imageURL").ToString().Trim();
((Label)e.Item.FindControl("lblPriceValue")).Text = ((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice")).ToString("f2") +" ₪";
((Label)e.Item.FindControl("lblHalfPriceValue")).Text = (((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice"))*HalfCoef).ToString("f2") + " ₪";
((Label)e.Item.FindControl("lblDoublePriceValue")).Text = (((Double)DataBinder.Eval(e.Item.DataItem, "doorPrice"))*DoubleCoef).ToString("f2") + " ₪";
((Image)e.Item.FindControl("doorPreview")).Attributes.Add("onclick","ShowTooltip" + e.Item.ItemIndex.ToString() + "()");
}
}
When i call the functions , nothing happens, no javascript error is shown and function is executed.
Also if i place alert after calling show i am reaching the code.
best regards
Yulian
0
yulian_o
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2008, 02:34 PM
I have moved one step forward , now i am having 2 problems :
1) javascript error is shown on calling show function of tooltip
Error: Sys.ArgumentOutOfRangeException: Value must be an integer.
Parameter name: x
Actual value was NaN.
Source File: http://store.sls.co.il/ScriptResource.axd?d=R2apk7od_23JTKMEUGyyrqNDM1aw6b4IO0XMAvk8LJ0NttvnNKCzdfoGlWE242E7oSr75p5A5yNZI90BBv01jsXZzRKyBrpkG9dv5l5K5KQ1&t=633307265461562500
Line: 6168
2) The position is not as wanted ( i want it to be center and it opens itself on bottom ).
example can be seen by getting to : http://store.sls.co.il/category.aspx?categoryID=2
and pressing on any door.
Thanks and best regards
Yulian
1) javascript error is shown on calling show function of tooltip
Error: Sys.ArgumentOutOfRangeException: Value must be an integer.
Parameter name: x
Actual value was NaN.
Source File: http://store.sls.co.il/ScriptResource.axd?d=R2apk7od_23JTKMEUGyyrqNDM1aw6b4IO0XMAvk8LJ0NttvnNKCzdfoGlWE242E7oSr75p5A5yNZI90BBv01jsXZzRKyBrpkG9dv5l5K5KQ1&t=633307265461562500
Line: 6168
2) The position is not as wanted ( i want it to be center and it opens itself on bottom ).
example can be seen by getting to : http://store.sls.co.il/category.aspx?categoryID=2
and pressing on any door.
Thanks and best regards
Yulian
0
Hi yulian_o,
Your setup turns out to be more complex than we initially thought because we understood that it is similar to our online example.
In order to let us help, please open a new support ticket and send us the following information:
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Your setup turns out to be more complex than we initially thought because we understood that it is similar to our online example.
In order to let us help, please open a new support ticket and send us the following information:
- A fully running project (including your database and .dll files) which does not have RadToolTip at all - instead of this, please only show a standard alert message when the button is clicked. Once we receive your project we will remove the alert and modify it in order to show a RadToolTip instead of the alert message.
Kind regards,
Svetlina
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
radBrad
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2008, 03:23 PM
I am having the same problem with the tooltip shows 400-500pixals higher after I scroll the screen.
I am using radtooltip in a asp:ListView
I am using radtooltip in a asp:ListView
0
radBrad
Top achievements
Rank 1
Rank 1
answered on 23 Apr 2008, 02:35 AM
I am having the same problem. It sounds very similar to a bug that was in an earlier version of the AjaxControl Toolkit.
have a look at this.
http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8398
or this:
http://forums.asp.net/t/1053191.aspx
The fix was to find the scroll offset before setting the location of the tooltip.
However, I can't figure out how to set the position of the tooltip through javascript after I find the offset ....
Please, someone help us with this issue.
have a look at this.
http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8398
or this:
http://forums.asp.net/t/1053191.aspx
The fix was to find the scroll offset before setting the location of the tooltip.
However, I can't figure out how to set the position of the tooltip through javascript after I find the offset ....
Please, someone help us with this issue.
0
Hello Brad,
I was not able to reproduce the problem you describe - Yulian's problem is connected to the behavior of the tooltip in one of our online examples. As far as I understand you, your problem is that when you scroll down the page and try to show a tooltip, the tooltip does not show in the correct position. I can recall that we had such a problem in one of the previous versions of the control, but it was fixed. Could you please make sure that you are using the latest version of RadControls for ASP.NET AJAX, namely version 2008.1.415.20? In case you can reproduce the problem with that version, please prepare and send us a simple running project, demonstrating that problem.
All the best,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I was not able to reproduce the problem you describe - Yulian's problem is connected to the behavior of the tooltip in one of our online examples. As far as I understand you, your problem is that when you scroll down the page and try to show a tooltip, the tooltip does not show in the correct position. I can recall that we had such a problem in one of the previous versions of the control, but it was fixed. Could you please make sure that you are using the latest version of RadControls for ASP.NET AJAX, namely version 2008.1.415.20? In case you can reproduce the problem with that version, please prepare and send us a simple running project, demonstrating that problem.
All the best,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Bobby Godwin
Top achievements
Rank 1
Rank 1
answered on 28 May 2008, 07:01 PM
I have solved this issue using the follow doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Best Regards
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Best Regards
0
Adam
Top achievements
Rank 1
Rank 1
answered on 29 May 2008, 04:13 AM
I too am having problems with Tooltip placement. I am using a RadScheduler along with RadToolTipManager following the online sample.
It "works", but the placement of the tooltip is no where near tooltipified appointment. I have found that settting RelativeTo=Element helps in Firefox (it's still off, but close), but in IE this is no help.
To complicate matters further, I am doing all of this inside of a DNN module. I am using the Web20 skin which I have found to be the only telerik skin that kinda-sorta works in DNN.
I am using the most recent (5/15) release.
Any thoughts?
It "works", but the placement of the tooltip is no where near tooltipified appointment. I have found that settting RelativeTo=Element helps in Firefox (it's still off, but close), but in IE this is no help.
To complicate matters further, I am doing all of this inside of a DNN module. I am using the Web20 skin which I have found to be the only telerik skin that kinda-sorta works in DNN.
I am using the most recent (5/15) release.
Any thoughts?
0
Hello Adam,
A quick question: what is the DOCTYPE of your DNN page? Is it XHTML compliant (see previous post), or not?
All RadControls for ASP.NET AJAX require XHTML compliant doctype (the one used by default in VS2005 and VS2008) to render and work properly.
If in quirks mode in IE, there could be positioning and layout problems in varous situations.
We have improved on the support for the obsolete IE quirksmode in the most recent release (5/15), and will do our best to make things even better, despite the fact that we strongly discourage people from using it (including DNN users). The push for moving to common standards has been for several years now.
Please let us know what doctype you are using, also, sending us a screenshot (in a support ticket) will help us reproduce the issue on our end and see if it can be improved on.
Greetings,
Tervel
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
A quick question: what is the DOCTYPE of your DNN page? Is it XHTML compliant (see previous post), or not?
All RadControls for ASP.NET AJAX require XHTML compliant doctype (the one used by default in VS2005 and VS2008) to render and work properly.
If in quirks mode in IE, there could be positioning and layout problems in varous situations.
We have improved on the support for the obsolete IE quirksmode in the most recent release (5/15), and will do our best to make things even better, despite the fact that we strongly discourage people from using it (including DNN users). The push for moving to common standards has been for several years now.
Please let us know what doctype you are using, also, sending us a screenshot (in a support ticket) will help us reproduce the issue on our end and see if it can be improved on.
Greetings,
Tervel
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Adam
Top achievements
Rank 1
Rank 1
answered on 29 May 2008, 03:08 PM
Yes, I have already tried the doctype solution based on the previous post. Using the mechanism introduced in DNN 4.5 (MySkin.doctype.xml), I have tried specifying both XHTML transitional & XHTML strict. Both offer improvements in Firefox, but no noticeable improvement in IE.
How do I open a support ticket? I thought I get 60days of support with my trial license, but when I click on support is says I am only a trial user & don't get support.
Please advise. If I can prove I can make this work for my client's demo in a week, my client will be purchasing a license.
Thank you again,
Adam
How do I open a support ticket? I thought I get 60days of support with my trial license, but when I click on support is says I am only a trial user & don't get support.
Please advise. If I can prove I can make this work for my client's demo in a week, my client will be purchasing a license.
Thank you again,
Adam
0
Hi Adam,
I tested your Client.net account and I verified that you are allowed to open and send support tickets from it.
You can see the attached screenshot for more information.
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I tested your Client.net account and I verified that you are allowed to open and send support tickets from it.
You can see the attached screenshot for more information.
Best regards,
Rumen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Brian
Top achievements
Rank 1
Rank 1
answered on 10 Mar 2009, 10:20 PM
I was having similar ToolTip position problems in the current version (2008.3.1125.35). When the page scrolled down, the tooltip would position correctly at times, but half the time it would be off vertically. I'm using the RadToolTipManager and binding to dynamically generated anchor tags with the client ID. The content in the my tooltip is coming from a web service and XSLT formatted XML so the content size varies from element to element.
I tried several things to fix the issue, but what finally fixed it for me was to set the Height and Width to fixed dimensions and just let the content in the tooltip box scroll as needed. Now it positions correctly each time.
Here's the ToolTipManager definition in my ASPX with the fixed Height and Width.
| <telerik:RadToolTipManager |
| ID="ContactsToolTipManager" |
| runat="server" |
| ManualClose="true" |
| Skin="Web20" |
| ShowEvent="OnClick" Animation="None" ShowDelay="5" HideDelay="0" |
| Position="MiddleRight" OffsetY="0" OffsetX="20" |
| RelativeTo="Element" |
| Height="200" |
| Width="350"> |
| <WebServiceSettings Method="GetToolTipData" Path="ContactInfo.asmx" /> |
| </telerik:RadToolTipManager> |
0
Hi Brian,
This is an excellent point.
Indeed, people often seem to forget about the need to set width/height to the tooltip manager.
Since tooltip content comes with AJAX, the process of initially showing the tooltip and the process of its displaying content happen at two different points in time (albeit close enough).
The problem is that the tooltip position is determined while there is still no content arrived from the server, so the tooltip has a size of about 1 px. Then when content arrives and the tooltip is resized it appears off-position.
We will make sure this is added to the RadToolTip documentation, and we will also investigate the possibility to update the tooltip position the tooltip once its server content arrives.
Best wishes,
Tervel
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.
This is an excellent point.
Indeed, people often seem to forget about the need to set width/height to the tooltip manager.
Since tooltip content comes with AJAX, the process of initially showing the tooltip and the process of its displaying content happen at two different points in time (albeit close enough).
The problem is that the tooltip position is determined while there is still no content arrived from the server, so the tooltip has a size of about 1 px. Then when content arrives and the tooltip is resized it appears off-position.
We will make sure this is added to the RadToolTip documentation, and we will also investigate the possibility to update the tooltip position the tooltip once its server content arrives.
Best wishes,
Tervel
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.