I have a problem with the tooltip positioning with some elements on my page. I am using the TooltipManager and geting tooltip using javacript. It is working fine with the position untill I scroll down the page.After scoll down it is showing tooltip uper side of the element. Here is my sample code:
<telerik:RadToolTipManager runat="server" ID="RadTaskToolTipMgr" OffsetY="-3" Width="280" Height="80" Position="BottomCenter" RelativeTo="Element" Animation="None" HideEvent="LeaveToolTip" Text="Loading..." ShowEvent="OnClick" />
<script type="text/javascript">
function GetTootltip(element, Task_id) {
var tooltipManager = $find("<%= RadTaskToolTipMgr.ClientID %>");
if (!tooltipManager) return;
var tooltip = tooltipManager.getToolTipByElement(element);
if (!tooltip) {
tooltip = tooltipManager.createToolTip(element);
$.ajax({
type: "POST",
url: "Get-Members.aspx",
data: "Id=" + Task_id + "&For=Task",
success: function(msg) { if (msg == "1") {
window.location = "../login.aspx";
}
else {
tooltip.set_text(msg);
element.onclick = null;
element.onmouseover = null;
tooltip.show();
}
}
});
}
else {
element.onclick = null;
element.onmouseover = null;
tooltip.show();
}
return false;
}
</script>
10 Answers, 1 is accepted
Rank 1
Hello,
After setting the targetControl the issue is solved in IE but still getting the issue in Firefox.
How can I set position for both IE and Forefox?
Here is my sample code:
var tooltipManager = $find("<%= RadTaskToolTipMgr.ClientID %>");
if (!tooltipManager) return;
var tooltip = tooltipManager.getToolTipByElement(element);
if (!tooltip) {
tooltip = tooltipManager.createToolTip(element);
tooltip.set_targetControl(element);
..........................................
.....................
Thank you,
Alex
I am afraid that the provided code is not enough to locate the problem. That is why I suggest to try ti reproduce the problem in one of our demos. e.g the configurator demo below:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/default/defaultcs.aspx
or another one which is closest to your setup. In case you succeed, please send me very detailed reproduction steps and explanations along with some screenshots and I will do my best to help.
If you cannot replicate the issue on our demos, please prepare a fully runnable reproduction page which can be run without modifications again with instructions and screenshots and once we are able to observe the issue, we will be able to provide more specific suggestions.
Svetlina
the Telerik team
Rank 1
I am using the concept of the following demo:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx
In my code I am calling javascript method on OnClientAppointmentClick of RadSchedular to generate tooltip dynamically.Here is my sample code:
<telerik:RadScheduler runat="server" EnableViewState="false" ID="RadScheduler1" ShowFullTime="true" Width="100%" AllowEdit="false" TimeZoneOffset="00:00:00" OverflowBehavior="Expand" ShowViewTabs="false" ShowNavigationPane="true" EnableRecurrenceSupport="true" OnClientAppointmentContextMenu="appointmentContextMenu" DataSubjectField="Subject" OnClientTimeSlotContextMenu="timeSlotContextMenu" EnableEmbeddedSkins="true" OnClientAppointmentClick="ShowToolTipForCalendar" OnClientAppointmentDoubleClick="OnClientAppointmentDoubleClick" DisplayDeleteConfirmation="false" MonthView-VisibleAppointmentsPerDay="5" AllowDelete="false" AllowInsert="false" NumberOfHoveredRows="1">
<TimelineView UserSelectable="true" />
<AppointmentTemplate><p title="<%#Eval("appointSub")%>"><%#Eval("appointSub") & " " & CType(Eval("StartTime"), Date).ToShortTimeString%> </p> </AppointmentTemplate> </telerik:RadScheduler>
<telerik:RadToolTipManager ID="RadToolTipManager1" Width="280" Height="80" ShowEvent="OnClick" ShowCallout="false" Position="BottomCenter" RelativeTo="Element" HideEvent="LeaveToolTip" Animation="None" runat="server" Text="Loading..." > </telerik:RadToolTipManager>
and using follwing javascript function :
function ShowToolTipForCalendar(sender, eventArgs) {
var element = eventArgs.get_appointment().get_element();
var tooltipManager = $find("<%= RadToolTipManager1.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);
var ActID;
var apt = eventArgs.get_appointment();
// apt.get_id() returns a number, converting to a string for future use.
var strID = apt.get_id() + "";
if (strID.indexOf("_") > -1) {
ActID = strID.substring(0, strID.indexOf("_"));
}
else {
ActID = strID;
}
$.ajax({
type: "POST",
url: "Get-Members.aspx",
data: "Id=" + ActID ,
success: function(msg) {
tooltip.set_text(msg);
element.onclick = null;
element.onmouseover = null;
tooltip.show();
}
});
}
else {
element.onclick = null;
element.onmouseover = null;
tooltip.show();
}
return false;
}
This is working fine in IE browser.But in Mozilla FireFox when scrolling the page and clicking on any apointment in the scheduler the new generated tooltip position going down.Without scrolling the page working fine.
Please guide me how can I resolve the issue.
Thank you,
Alex.
Since the code you provide is not runnable, I used it in one of our online demos but unfortunately to no avail - I was not abel to reproduce difference in the show position under FF before and after the page is scrolled. That is why I attached my test demo for your reference, please :
1) If you can reproduce the issue with this very same code, provide a video capture of the reproduction steps
2) If modifications need to be applied to see the issue, share full source code of the modified demo (make sure it is still fully runnable after modifications) and provide a video capture of the problem.
Once I am able to reproduce, examine and debug the problem on my side, I will do my best to help.
Svetlina
the Telerik team
Rank 1
I have implemented the demo code provided by you and replace some text in tooltip for testing.I got the same issue in mozila firefox and working fine in IE.
I have attached the demo images. You can see in demo1 image without scrolling the schedular content, the tooltip posion working fine.But when scrolling the content, tooltip position goes down.
Here is my sample code:
<%
@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Scheduler.BindToList.DefaultVB" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title></head>
<body class="BODY">
<form id="Form1" method="post" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div style="height: 200px;"></div>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadScheduler1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
<div class="bigModule">
<div class="bigModuleBottom">
In addition to using declarative data sources and custom providers <b>RadScheduler</b> can also be bound to both generic and non-generic collections. <br />This allows you to directly use your business objects as a data source.
</div>
</div>
<div class="exampleContainer">
<telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" DayStartTime="08:00:00" DayEndTime="18:00:00" TimeZoneOffset="03:00:00" OnAppointmentInsert="RadScheduler1_AppointmentInsert" OnAppointmentUpdate="RadScheduler1_AppointmentUpdate" OnAppointmentDelete="RadScheduler1_AppointmentDelete" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End" DataRecurrenceField="RecurrenceRule" OnClientAppointmentClick="ShowToolTipForCalendar" DataRecurrenceParentKeyField="RecurrenceParentId">
<AdvancedForm Modal="true" />
<TimelineView UserSelectable="false" />
<%--<TimeSlotContextMenuSettings EnableDefault="true" />
<AppointmentContextMenuSettings EnableDefault="true" />--%>
</telerik:RadScheduler>
</div>
<div style="height: 1000px;"></div>
<telerik:RadToolTipManager ID="RadToolTipManager1" Width="280" Height="80" ShowEvent="OnClick" ShowCallout="false" Position="BottomCenter" RelativeTo="Element" HideEvent="LeaveToolTip" Animation="None" runat="server" Text="Loading..."></telerik:RadToolTipManager>
<telerik:RadCodeBlock ID="block" runat="server">
<script type="text/javascript">
function ShowToolTipForCalendar(sender, eventArgs)
{
var element = eventArgs.get_appointment().get_element();
var tooltipManager = $find("<%= RadToolTipManager1.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);
// var ActID;
// var apt = eventArgs.get_appointment();
// // apt.get_id() returns a number, converting to a string for future use.
// var strID = apt.get_id() + "";
// if (strID.indexOf("_") > -1)
// {
// ActID = strID.substring(0, strID.indexOf("_"));
// }
// else
// {
// ActID = strID;
// }
// $telerik.$.ajax({
// type: "POST",
// url: "Get-Members.aspx",
// data: "Id=" + ActID,
// success: function (msg)
// {
tooltip.set_text("test<br/>test<br/>test<br/>test<br/>test<br/>");
element.onclick = null;
element.onmouseover = null;
tooltip.show();
// }
// });
}
else
{
element.onclick = null;
element.onmouseover = null;
tooltip.show();
}
return false;
}
</script>
</telerik:RadCodeBlock>
</form>
</body>
</html>
Thank you,
Alex
I replaced the page code with the new source and tested again under FF and IE but unfortunately to no avail. The only scenario in which I was able to reproduce the problem is when the tooltip is already shown and the scheduler is then scrolled, but this is expected and not what you report as far as I understand. Would you please examine the video capture I prepared for your reference and let me know in case I am doing something wrong?
http://screencast.com/t/l4V92neF5p
It will be best if you can also make a video of the problem reproduced with the very same code.
Svetlina
the Telerik team
Rank 1
Thanks for video capture.
I checked the video and it's working perfectly in your video in both IE and Mozila.And you got exactly what I want.
One thing I notice and confuse about RadWindow.js.
Please let me know more about RadWindow.js.
I also tried by including RadWindow.js in my demo page and got the same problem.
I checked that my RadWindow.js code and fount that it is different from which I have seen in the video provided by you.
Is it necessary to include RadWindow.js in the page? Or the old version of RadWindow.js causing the issue?
Thanks,
Alex
Please, accept my sincere apologies for sending you a confusing video capture! The project with the RadWindow.js is actually in another instance of Visual Studio, which I had opened and minimized before showing your other project in the other instance of Visual Studio. The RadWindow.js file has nothing to do with your demo project or the problem - I actually tested with exactly the same code you sent. This being said, if the problem continues on your side I will really need instructions how to reproduce it on my side because the code you sent did not replicate it. Probably you could test on another machine on your side as well or send me a live url or suggest another approach to get the same result as the one you describe.
I apologize once again for the confusion at the beginning of the video capture.
Happy holidays!
Kind regards,
the Telerik team
Rank 1
I am using mozila's 3.5.30729 version. Is there any version related issue?
I tried on anothe machine and got the same issue and we are using mozila's 3.5.30729 version in all machine.
I have watched the video sent by you and I am getting the issue in the same way as you checked in the viedo.
And I am facing one more issue related to OnClientAppointmentClick and OnClientAppointmentDoubleClick properties of Radscheduler.
OnClientAppointmentClick the ShowToolTipForCalendar function is being called to get tooltip and OnClientAppointmentDoubleClick the OnClientAppointmentDoubleClick Javascript function is being called to get edit window.
Now when I am double clicking on the appointment, first ShowToolTipForCalendar function is being called and than OnClientAppointmentDoubleClick function is being called. Is there any way to hide the single click function when double clicking the appointment?
Thank you,
Alex
Straight to your questions:
1) Indeed, it is possible that the version is causing the difference since everything else in our test seems to be the same. The version I tested under is 3.6.13, would you please test under it and let us know whether this changes the behavior?
2) What I can suggest to try is the following:
- put the code for the single click in a timeout
- in the double click handler set some flag
- since the single click has a timeout, if there was a double click, the flag should be already set; check it and if it shows that there was a double click, do not execute the code.
This solution is not the best one but your requirement and how the things work make it hard to achieve what you ask about in a better manner.
I hope that my reply is helpful, let us know hoe it goes.
Kind regards,
Svetlina
the Telerik team