RadToolTip does not hide on mouseout of RadScheduler Appointment

[Nehal]

Hi,

I have created RadTollTip for RadScheduler appointment on RadScheduler's OnAppointmentCreated event as shown below.

protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
        {
LinkButton lnkButtonMore = new LinkButton();                 lnkButtonMore.ID = "lnkBtn" + e.Appointment.ID.ToString();                 lnkButtonMore.Attributes.Add("runat", "server");                    lnkButtonMore.Text = e.Appointment.Subject ;                    lnkButtonMore.ToolTip = "";                 lnkButtonMore.ForeColor = System.Drawing.Color.Black;                 lnkButtonMore.Enabled = false;                 lnkButtonMore.Font.Size = FontUnit.Point(8);                 lnkButtonMore.Height = new Unit(100, UnitType.Percentage);                 lnkButtonMore.Width = new Unit(100, UnitType.Percentage);                 lnkButtonMore.Font.Underline = false; 

RadToolTip radTooltip = new RadToolTip();
                radTooltip.ID = "radAppr"+ e.Appointment.ID.ToString();;
                radTooltip.Attributes.Add("runat", "server");
                radTooltip.Text = strbulToolTip.ToString();
                radTooltip.BorderStyle = BorderStyle.None;
                radTooltip.TargetControlID = e.Appointment.ClientID;
                radTooltip.IsClientID = true;
                radTooltip.AutoCloseDelay = 0;
                radTooltip.ShowDelay = 0;
                radTooltip.HideDelay = 0;
                radTooltip.Position = ToolTipPosition.MiddleLeft;
                radTooltip.RelativeTo = ToolTipRelativeDisplay.Element;
                radTooltip.HideEvent = ToolTipHideEvent.LeaveTargetAndToolTip;  

e.Container.Controls.Add(lnkButtonMore);             
                e.Container.Controls.Add(radTooltip);
            }

Where "strbulToolTip" contains the table which I show as ToolTip of appointment.

Issue occurs when I keep mouse pointer on appointment for 5 to 10 seconds and then remove mouse pointer from appointment, ToolTip does not hide.

If I remove mouse pointer from appointment in less then 5 seconds then it hides ToolTip.

Regards,
Nehal

[Ivaylo]

Hello Nehal,

Thank you for your question.

I have created a sample project with the code provided and tried to reproduce the issue, however, to no avail. I am attaching a sample video showing that no issues with the Tooltip occur on my side. I have also included a sample page that I have used in my attempt to reproduce the problem.

Just on a side note, keep in mind, that if you have placed any timers or Update Panels on the page, they might be causing the issue. Furthermore, in the ToolTip's Demo you can find additional information on how to attach a Tooltip to an appointment together with a fully-runnable example, if you might find it useful for your project.

In order to be able to delve deeper into the problem may I ask you for some additional information regarding your browser, its version, the controls' version you are using and any steps that might help us reproduce the issue? Could you please test if the issue is encountered with the attached code as well? You can refer to the following article for more information on how to isolate the problem: Isolating a problem in a sample project.

We will be expecting your feedback.

Regards,
Ivaylo
Telerik

[Nehal]

Hello Ivaylo,

Thank you for quick reply.

As you mentioned, I have timer and Update panel on the page but i checked by removing both but still getting problem.

This problem comes in IE and Safari browser. My Telerik dll's version is 2012.3.1205.35.

More information. This problem comes only when we slowly remove mouse cursor from appointment.

More Detailed code:-

protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
    {
        StringBuilder strbulToolTip = new StringBuilder();
        strbulToolTip.Append("<table width='220px' style='color:#696969; background-color:#fff; border:none; font-weight:normal;'>");
        strbulToolTip.Append("<tr><td align='Left' valign='Top' colspan='2' style='font-weight:bold; font-size:16px; height:25px; padding-left: 5px; padding-top: 10px; background-color:#f1861b; color:#fff;'>'Title1'</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title2'</td><td align='Left' valign='Top'>'Title3'</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title4'</td><td align='Left' valign='Top'>'Title5'</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title6'</td><td align='Left' valign='Top'>'Title7'</td></tr>");
        strbulToolTip.Append("</table>");
      string data = "1"+ "," + "1"+ "," + "1"+ "," + e.Appointment.ID.ToString();
        LinkButton lnkButtonMore = new LinkButton();
        lnkButtonMore.ID = "lnkBtn" + e.Appointment.ID.ToString();
        //Problem is in below line.If i insert simple text then works fine.
        lnkButtonMore.Text = "<span class='question' onmouseover='over(" + e.Appointment.ID.ToString()+ ")' onmouseout='out(" + e.Appointment.ID.ToString()+ ")' style='width:100%; height:100%;' title='" + data + "'>" + e.Appointment.Subject + "</span>";
        lnkButtonMore.ToolTip = "";
        lnkButtonMore.ForeColor = System.Drawing.Color.Black;
        lnkButtonMore.Enabled = false;
        lnkButtonMore.Font.Size = FontUnit.Point(8);
        lnkButtonMore.Height = new Unit(100, UnitType.Percentage);
        lnkButtonMore.Width = new Unit(100, UnitType.Percentage);
        lnkButtonMore.Font.Underline = false;

        RadToolTip radTooltip = new RadToolTip();
        radTooltip.ID = "radApp" + e.Appointment.ID.ToString();
        radTooltip.Text = strbulToolTip.ToString();
        radTooltip.TargetControlID = e.Appointment.ClientID;
        radTooltip.IsClientID = true;
        radTooltip.AutoCloseDelay = 0;
        radTooltip.ShowDelay = 0;
        radTooltip.HideDelay = 0;
        radTooltip.Position = ToolTipPosition.MiddleLeft;
        radTooltip.RelativeTo = ToolTipRelativeDisplay.Element;
        radTooltip.HideEvent = ToolTipHideEvent.LeaveTargetAndToolTip;

        e.Container.Controls.Add(lnkButtonMore);
        e.Container.Controls.Add(radTooltip);
    }

 

<style type="text/css">
        span.question
        {
            display: block;
            position: absolute;
        }
        span.question:hover
        {
            background-color: transparent;
        }
    </style>

<script type="text/javascript">
        function over(id) {
            $(document).ready(function () {
                $("span.question").live("mouseover", function () {
                    var t = this.title.split(','); var t1 = ""; var t2 = ""; var t3 = "";
                    if (t[3] != null) {
                        if (t[0] == "1") { t1 = ('<image height="11px" width="13px" style="float: left; margin-left: 20px; margin-top:3px;" src="image/E_icon.jpg"/>'); }
                        if (t[1] == "1") { t2 = ('<image height="11px" width="13px" style="float: left; margin-left: 1px; margin-top:3px;" src="image/C_icon.jpg"/>'); }
                        if (t[2] == "1") { t3 = ('<image height="11px" width="13px" style="float: left; margin-left: 1px; margin-top:3px;" src="image/R_icon.jpg"/>'); }
                        $(this).append('<div id=E' + t[3] + ' style="position:absolute; ">' + t1 + '' + t2 + '' + t3 + '</div>').css("display", "block");
                        this.title = "";
                    }
                    else {
                        if (id != null) {
                            var e = "#" + ("E" + id);
                            $(e).css("display", "block");
                            id = "";
                        }
                    }
                }, function () { $(t[3]).remove(); });
            });
        }

        function out(t) {
            $(document).ready(function () {
                $("span.question").live("mouseout", function () {
                    if (t != null) {
                        var e = "#" + ("E" + t);
                        $(e).css("display", "none");
                    }
                }, function () { $(t).remove(); });
            });
        }
    </script>

[Ivaylo]

Hello Nehal,

Thank you for your feedback and the time spent preparing the sample code.

I am afraid that I was not able to reproduce the issue with the provided code once again. I have used the mentioned version of the control (2012.3.1205) and tested the tooltip's behavior in all versions of Internet Explorer (7,8,9, and 10) and in Safari, as well. However, I have had no success replicating the problem. 

I am attaching a video showing one of those tests. Could you please watch it and notify us if we are missing any steps required to reproduce the issue?

Furthermore, could you provide us with additional information for testing purposes, such as the Scheduler's view in which the problem occurs, the exact version of IE (9,10, etc.) and any Document Mode that might be specified for the browser? Also, would you mind creating a video which shows the exact reproduction of the problem and send us its link so that we can examine it.

On a side note, have you noticed any JavaScript errors, that might have been reported in the browser's console upon the issue's occurrence?

Thank you for your patience and efforts. We will be expecting your feedback, so that we can further investigate what might be causing the issue.

Regards,
Ivaylo
Telerik

[Nehal]

Hi ivaylo,

I made one demo project (check attachment) which contains one page, Telerik dll's and XML file for appointments. I modified my code that was previously sent to simple code by removing style and javascript but still problem arrives.


Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" ID="scriptmanager1">
        </asp:ScriptManager>
        <telerik:RadScheduler runat="server" ID="RadScheduler1" OnAppointmentCreated="RadScheduler1_AppointmentCreated" SelectedDate="2013-06-12"
            DataKeyField="ID" DataEndField="End" DataStartField="Start" DataSubjectField="Subject" OverflowBehavior="Expand"
            SelectedView="WeekView">
        </telerik:RadScheduler>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    private const string ProviderSessionKey = "Telerik.Web.Examples.Scheduler.XmlSchedulerProvider.DefaultCS";

    protected void Page_Load(object sender, EventArgs e)
    {
        XmlSchedulerProvider provider;
        if ((Session[ProviderSessionKey] == null) || (!IsPostBack))
        {
            provider = new XmlSchedulerProvider(Server.MapPath("Appointments.xml"), false);
            Session[ProviderSessionKey] = provider;
        }
        else
        {
            provider = (XmlSchedulerProvider)Session[ProviderSessionKey];
        }

        RadScheduler1.Provider = provider;
    }

    protected void RadScheduler1_AppointmentCreated(object sender, AppointmentCreatedEventArgs e)
    {
        StringBuilder strbulToolTip = new StringBuilder();
        strbulToolTip.Append("<table width='220px' style='color:#696969; background-color:#fff; border:none; font-weight:normal;'>");
        strbulToolTip.Append("<tr><td align='Left' valign='Top' colspan='2' style='font-weight:bold; font-size:16px; height:25px; padding-left: 5px; padding-top: 10px; background-color:#f1861b; color:#fff;'>" + e.Appointment.Subject + "</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title2'</td><td align='Left' valign='Top'>'Title3'</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title4'</td><td align='Left' valign='Top'>'Title5'</td></tr>");
        strbulToolTip.Append("<tr><td align='Left' width='100px' valign='Top' style='height:25px; padding-left: 5px;'>'Title6'</td><td align='Left' valign='Top'>'Title7'</td></tr>");
        strbulToolTip.Append("</table>");

        LinkButton lnkButtonMore = new LinkButton();
        lnkButtonMore.ID = "lnkBtn" + e.Appointment.ClientID.ToString();
        lnkButtonMore.Text = e.Appointment.Subject;
        lnkButtonMore.ToolTip = "";
        lnkButtonMore.ForeColor = System.Drawing.Color.Black;
        lnkButtonMore.Enabled = false;
        lnkButtonMore.Font.Size = FontUnit.Point(8);
        lnkButtonMore.Height = new Unit(100, UnitType.Percentage);
        lnkButtonMore.Width = new Unit(100, UnitType.Percentage);
        lnkButtonMore.Font.Underline = false;

        RadToolTip radTooltip = new RadToolTip();
        radTooltip.ID = "radApp" + e.Appointment.ClientID.ToString();
        radTooltip.Text = strbulToolTip.ToString();
        radTooltip.TargetControlID = e.Appointment.ClientID;
        radTooltip.IsClientID = true;
        radTooltip.AutoCloseDelay = 0;
        radTooltip.ShowDelay = 0;
        radTooltip.HideDelay = 0;
        radTooltip.Position = ToolTipPosition.MiddleLeft;
        radTooltip.RelativeTo = ToolTipRelativeDisplay.Element;
        radTooltip.HideEvent = ToolTipHideEvent.LeaveTargetAndToolTip;

        e.Appointment.Subject = "";
        e.Container.Controls.Add(lnkButtonMore);
        e.Container.Controls.Add(radTooltip);
    }
}

Appointments.xml

<?xml version="1.0" encoding="utf-8"?>
<Appointments>
  <NextID>1</NextID>

  <Appointment>
    <ID>1</ID>
    <Subject>Breakfast</Subject>
    <Start>2013-06-11T15:00Z</Start>
    <End>2013-06-11T17:00Z</End>

  </Appointment>
  <Appointment>
    <ID>2</ID>
    <Subject>Technical meeting</Subject>
    <Start>2013-06-12T12:30Z</Start>
    <End>2013-06-12T14:30Z</End>

  </Appointment>
  <Appointment>
    <ID>3</ID>
    <Subject>Appointment with the dentist.</Subject>
    <Description>Last one, for now</Description>
    <Start>2013-06-13T08:30Z</Start>
    <End>2013-06-13T09:30Z</End>

  </Appointment>
  <Appointment>
    <ID>4</ID>
    <Subject>Lunch</Subject>
    <Description>Should make a reservation by phone earlier</Description>
    <Start>2013-06-14T10:30Z</Start>
    <End>2013-06-14T11:30Z</End>
  </Appointment>

</Appointments>

Bug come in all browser (Screen is taken in chrome) if we slowly move cursor from one appointment to another or continually move over and out from same appointment.


Regards,
Nehal 

[Ivaylo]

Hello Nehal,

Thank you for your feedback and for the provided code.

We have once again created a sample project without changing your scenario in any way. However, I am afraid that we were not able to reproduce the issue for a consecutive time. We have tested the project in all browsers using your controls' version, but to no avail.

We have, however, further delved into your case and can suggest the following workaround, which, I hope, will satisfy your project's requirements:

JAVASCRIPT

var timer = false;

 

function hideCurrentTooltip() {

    //if appointment was not revisited in 100ms - close tooltip            

    if(timer !== false)

    clearTimeout(timer);

    timer = setTimeout(function() {

        var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();

        if(activeTooltip) activeTooltip.hide();

    }, 100);  


}

 

function doNotHide() {

    //cancel hiding of the tooltip on appointment mouse over

    if(timer) clearTimeout(timer);

}

 

function pageLoad() {

    //attach event handlers on page load

    $telerik.$(".rsApt", $get("<%=RadScheduler1.ClientID%>")).mouseout(hideCurrentTooltip);

    $telerik.$(".rsApt", $get("<%=RadScheduler1.ClientID%>")).mouseover(doNotHide);

}

What it does is that it attaches two event handlers to each appointment - one on the mouseout event(to hide the tooltip) and one on the mouseover event (to cancel the hiding event). One hundred milliseconds after the user leaves the appointment, the tooltip will be closed.

Thank you for your patience. I hope that the provided solution will meet your project's requirements. Should you have any other questions, do not hesitate to contact us.

Regards,
Ivaylo
Telerik

[Nehal]

Hi Ivaylo,

That's helped me. Thank you so much.

I gave two event handlers to each appointment - one on the mouseout event and one on the mouseover from the server side on RadScheduler's OnAppointmentCreated event as shown below.

e.Appointment.AppointmentControls[0].Attributes.Add("onmouseover", "doNotHide();");
e.Appointment.AppointmentControls[0].Attributes.Add("onmouseout", "hideCurrentTooltip();");

Regards,
Nehal

[Ivaylo]

Hello Nehal,

Thank you for the feedback. I am glad to hear that the provided solution runs smoothly.

Feel free to contact us in case you have any other questions.

Regards,
Ivaylo
Telerik