title: Tooltip in FullCalendar
body: <p>I am trying to make a tooltip in my calendar,
   the calendar is working properly but I want to show more details of the patient, like
  Description of patient on mouseover. I have no idea how to do it?
  Can some one help me out?</p>
  
  <blockquote>
    <p>ref link(<a href="https://fullcalendar.io/" rel="nofollow noreferrer">https://fullcalendar.io/</a>)</p>
  </blockquote>
  
  <p>This is what I did </p>
  
  <pre><code> &lt;div id='calendar'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript(ajax) </p>
  
  <p>Data take from dynamic</p>
  
  <pre><code>&lt;link href='jscss/fullcalendar.min.css' rel='stylesheet' /&gt;
      &lt;link href='jscss/fullcalendar.print.min.css' rel='stylesheet' media='print' /&gt;
      &lt;script src='lib/moment.min.js'&gt;&lt;/script&gt;
      &lt;script src='lib/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='jscss/fullcalendar.min.js'&gt;&lt;/script&gt;
      &lt;script src='jscss/locale-all.js'&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function () {
                  $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: "Scheduler.aspx/GetEvents",
                      dataType: "json",
                      success: function (data) {
                          var initialLocaleCode = 'en';
                          var myJsonString = data.d;
                          $('#calendar').fullCalendar({
                              header: {
                                  left: 'prev,next today',
                                  center: 'title',
                                  right: 'month,agendaWeek,agendaDay,listMonth'
                              },
                              defaultDate: new Date(),
                              locale: initialLocaleCode,
                              buttonIcons: false, // show the prev/next text
                              weekNumbers: true,
                              navLinks: true, // can click day/week names to navigate views
                              editable: true,
                              eventLimit: true, // allow "more" link when too many events   
                              events: data.d
                          });
                      }
                  });
              });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Method</p>
  
  <pre><code>    [WebMethod]
      public static IList GetEvents()
      {
          clsDBOperation obj = new clsDBOperation();
          DataTable dt1 = obj.GetDataTable("SELECT con.EDate as EDate ,  con.pfname , COUNT(*) OVER (PARTITION BY CAST(con.AppDate AS DATE)) Appointment, con.AppDate as Date, CAST(con.AppTime AS Time(0)) Time from Consultation as con inner join DoctorMaster as doc on con.DrCode=doc.id where con.DrCode='" + HttpContext.Current.Session["DrCode"] + "' ");
              IList events = new List&lt;Event&gt;();
              for (int i = 0; i &lt; dt1.Rows.Count; i++)
              {
                  DataRow dRow4 = dt1.Rows[i];
                  events.Add(new Event
                  {
                     start = Convert.ToDateTime(dRow4["Date"].ToString()).ToString("yyyy-MM-dd") + "T" + dRow4["Time"].ToString(),
                      end = Convert.ToDateTime(dRow4["Date"].ToString()).ToString("yyyy-MM-dd") + "T" + dRow4["Time"].ToString(),
                      title = dRow4["pfname"].ToString(),
                      Appointment = dRow4["Appointment"].ToString(),
                      Time = dRow4["Time"].ToString()
  
                  });
              }
              return events;
      }
  }
  public class Event
  {
      public string start { get; set; }
      public string end { get; set; }
      public string title { get; set; }
      public string Appointment { get; set; }
      public string Time { get; set; }
  }
  </code></pre>