Tooltip for javascript calendar date picker
<p>I have used this javascript for the calendar date picker.it works fine.But i need a tool tip on mouse over for this script.for eg in this javascript calendar date picker when i move the mouse to particular date on 26th of September the tool tip should show as  "September26,2011".how to modify in this javascript.</p>

<p>This is my script.....</p>

<pre><code>  &lt;script type="text/javascript" language="javascript"&gt;

     function positionInfo(object) 
     {
      var p_elm = object;
      this.getElementLeft = getElementLeft;
      function getElementLeft() 
      {
        var x = 0;
        var elm;
        if(typeof(p_elm) == "object")
        {
          elm = p_elm;
        }
        else 
        {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) 
        {
          x+= elm.offsetLeft;
          elm = elm.offsetParent;
        }
        return parseInt(x);
      }

      this.getElementWidth = getElementWidth;
      function getElementWidth()
      {
        var elm;
        if(typeof(p_elm) == "object")
        {
          elm = p_elm;
        } 
        else 
        {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetWidth);
      }

      this.getElementRight = getElementRight;
      function getElementRight()
      {
        return getElementLeft(p_elm) + getElementWidth(p_elm);
      }

      this.getElementTop = getElementTop;
      function getElementTop() 
      {
        var y = 0;
        var elm;
        if(typeof(p_elm) == "object")
        {
          elm = p_elm;
        } 
        else
        {
          elm = document.getElementById(p_elm);
        }
        while (elm != null) {
          y+= elm.offsetTop;
          elm = elm.offsetParent;
        }
        return parseInt(y);
      }

      this.getElementHeight = getElementHeight;
      function getElementHeight(){
        var elm;
        if(typeof(p_elm) == "object")
        {
          elm = p_elm;
        }
        else 
        {
          elm = document.getElementById(p_elm);
        }
        return parseInt(elm.offsetHeight);
      }

      this.getElementBottom = getElementBottom;
      function getElementBottom(){
        return getElementTop(p_elm) + getElementHeight(p_elm);
      }
    }

    function CalendarControl() {
      var startyr,endyr;
      var calendarId = 'CalendarControl';
      var currentYear = 0;
      var currentMonth = 0;
      var currentDay = 0;

      var selectedYear = 0;
      var selectedMonth = 0;
      var selectedDay = 0;

      var months = ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sep','Oct','Nov','Dec'];
      var monthstring = ['January','February','March','April','May','June','July','August','September','October','November','December'];
      var dateField = null;

      function getProperty(p_property)
      {
        var p_elm = calendarId;
        var elm = null;

        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if (elm != null)
        {
          if(elm.style)
          {
            elm = elm.style;
            if(elm[p_property])
            {
              return elm[p_property];
            }
             else 
            {
              return null;
            }
          } 
          else 
          {
            return null;
          }
        }
      }

      function setElementProperty(p_property, p_value, p_elmId)
      {
        var p_elm = p_elmId;
        var elm = null;

        if(typeof(p_elm) == "object"){
          elm = p_elm;
        } else {
          elm = document.getElementById(p_elm);
        }
        if((elm != null) &amp;&amp; (elm.style != null)){
          elm = elm.style;
          elm[ p_property ] = p_value;
         }
      }

      function setProperty(p_property, p_value) {
        setElementProperty(p_property, p_value, calendarId);
      }

      function getDaysInMonth(year, month) {
        return [31,((!(year % 4 ) &amp;&amp; ( (year % 100 ) || !( year % 400 ) ))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
      }

      function getDayOfWeek(year, month, day) {
        var date = new Date(year,month-1,day)
        return date.getDay();
      }

      this.setDate = setDate;
      function setDate(year, month, day) {
        if (dateField) {
          if (month &lt; 10) {month = "0" + month;}
          if (day &lt; 10) {day = "0" + day;}

          var dateString = month+"/"+day+"/"+year;
          dateField.value = dateString;
          hide();
        }
        return;
      }

      this.changeMonth = changeMonth;
      function changeMonth(change,month,DateorMonthList)
       {
       if(DateorMonthList==0)
       {
             currentMonth += change;
            currentDay = 0;
            if(currentMonth &gt; 12) {
                currentMonth = 1;
                currentYear++;
            } else if(currentMonth &lt; 1) {
            currentMonth = 12;
            currentYear--;
            }
        }
        else
        {
        currentMonth=month;
        }    
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
       }

      this.changeYear = changeYear;
      function changeYear(change) {
        currentYear += change;
        currentDay = 0;
        calendar = document.getElementById(calendarId);
        calendar.innerHTML = calendarDrawTable();
      }

      function getCurrentYear() {
        var year = new Date().getYear();
        if(year &lt; 1900) year += 1900;
        return year;
      }

      function getCurrentMonth() {
        return new Date().getMonth() + 1;
      } 

      function getCurrentDay() {
        return new Date().getDate();
      }

      function calendarDrawTable()
    {
        var dayOfMonth = 1;
        var validDay = 0;
        var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
        var daysInMonth = getDaysInMonth(currentYear, currentMonth);
        var css = null; 

        var tempyear=0,tempMonth=0;

        var table = "&lt;table style='table-layout:fixed;width:170px;height:170px;font-family: arial, Verdana, helvetica, sans-serif;font-size: 9pt;border-width:1pt;border-style:solid;border-color:Black;'&gt;";
        table=table+"&lt;tr&gt;";
        table = table + "&lt;td&gt;&lt;a href=\'javascript:changeCalendarControlMonth(0,"+ currentMonth +",0)'&gt;&lt;img src='Images/PreviousIcon.Bmp' style=border-color:white&gt;&lt;a&gt;&lt;/td&gt;";
        table = table + "&lt;td  colspan='5' style=text-align:Center;&gt;&lt;a href=\'javascript:changeCalendarControlMonth(2,"+ currentMonth +",0)' style='text-decoration:underline;font-size:9pt;font-weight:bold;color:black;text-align:center;font-family:Segoe UI, Verdana, Helvetica, sans-serif;text-align:center;'onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';&gt;"+ monthstring[currentMonth-1] +", " +currentYear + "&lt;/a&gt;&lt;/td&gt;";
        table = table + "&lt;td&gt;&lt;a href=\'javascript:changeCalendarControlMonth(1,"+ currentMonth +",0)'&gt;&lt;img src='Images/NextIcon.Bmp' style=border-color:white&gt;&lt;a&gt;&lt;/td&gt;";
        table=table+"&lt;/tr&gt;";
        table = table + "&lt;tr style='font-weight: bold;'&gt;&lt;th&gt;Su&lt;/th&gt;&lt;th&gt;Mo&lt;/th&gt;&lt;th&gt;Tu&lt;/th&gt;&lt;th&gt;We&lt;/th&gt;&lt;th&gt;Th&lt;/th&gt;&lt;th&gt;Fr&lt;/th&gt;&lt;th&gt;Sa&lt;/th&gt;&lt;/tr&gt;";

        for(var week=0; week &lt; 6; week++) 
            {
                table = table + "&lt;tr&gt;";
                for(var dayOfWeek=0; dayOfWeek &lt;=6; dayOfWeek++) 
                    {
                    if(week == 0 &amp;&amp; startDayOfWeek == dayOfWeek)
                        {
                            validDay = 1;
                        }
                    else if (validDay == 1 &amp;&amp; dayOfMonth &gt; daysInMonth) 
                        {
                            validDay = 0;
                        }   

                    if(validDay)
                        {
                        if (dayOfMonth == selectedDay &amp;&amp; currentYear == selectedYear &amp;&amp; currentMonth == selectedMonth) 
                            {
                            //selected date 
                            css = "text-decoration:none;color:#5378C1;width: 2em; background-color:#D0DFFA;font-weight: bold;";
                            } 
                        else if (dayOfWeek == 0 || dayOfWeek == 6) 
                            {
                            //inside the calendar
                            css = "text-decoration: none;border:solid 1px #FFF;color:black;font-size:8pt;font-weight: bold;";
                            }
                        else {
                            css = "text-decoration: none;border:solid 1px #FFF;color:black;font-size:8pt;font-weight: bold;";
                             }

                          table = table + "&lt;td&gt;&lt;a style='"+css+"'  href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\"  onmouseover=this.style.color='black';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=if("+dayOfMonth+"=="+selectedDay+"){this.style.background='#D0DFFA';this.style.color='black'}else{this.style.background='white';this.style.color='black'};this.style.fontWeight='bold';&gt;"+dayOfMonth+"&lt;/a&gt;&lt;/td&gt;";
                        dayOfMonth++;
                        } 
                        else 
                        {
                        table = table + "&lt;td&gt;&lt;/td&gt;";
                        }

                        }
                    table = table + "&lt;/tr&gt;";
                }
                //"Close" css
                table = table + "&lt;tr&gt;&lt;th colspan='7' style='padding: 3px;vertical-align:middle'&gt;&lt;a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana&gt;Close&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;";
                table = table + "&lt;/table&gt;";

            tempyear=currentYear;
            tempMonth=currentMonth;
            return table;
        }

    this.createMonthTable=createMonthTable;
    function createMonthTable(change,yr,Monthoryear)
    {
        if(Monthoryear=="month")
        {
        currentYear=currentYear+change;
        }
        else 
        {
        currentYear=yr;
        }
        var count=1;
        var table = "&lt;table style=border-color:black;border-style:solid;border-width:1pt;font-family: arial, Verdana, helvetica, sans-serif;&gt;&lt;tr&gt;&lt;td&gt;&lt;table style=table-layout:fixed;width:160px;&gt;";
        table=table+"&lt;tr&gt;&lt;td&gt;&lt;a href='javascript:changeCalendarControlYear(-1,1);'&gt;&lt;img src='Images/PreviousIcon.Bmp' style=border-color:white;&gt;&lt;/img&gt;&lt;/a&gt;&lt;/td&gt;";
        table = table + "&lt;td colspan='5' style=text-align:Center;&gt;&lt;a href=\'javascript:changeCalendarControlYear(-11,2);' style='text-decoration:none;font-size:8pt;color:black;font-weight:bold;' onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';&gt;"+ currentYear + "&lt;/a&gt;&lt;/td&gt;";
        table = table + "&lt;td&gt;&lt;a href='javascript:changeCalendarControlYear(1,1);'&gt;&lt;img src=Images/NextIcon.Bmp style=border-color:white;&gt;&lt;/img&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
        table=table+"&lt;/table&gt;&lt;table style=table-layout:fixed;width:160px;height:138px;&gt;&lt;tr&gt;";
           for(i=0;i&lt;months.length;i++)
         {
            count++;
            table=table+"&lt;td colspan=2 style=text-align:center;height:30px;&gt;&lt;a href=\'javascript:changeCalendarControlMonth(0,"+ (i+1) +",1)' style='text-decoration: none;color:Black; font-size:8pt;' onmouseover=this.style.color='#5378C1';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=this.style.color='black';this.style.fontWeight='normal';this.style.background='white';&gt;"+months[i]+"&lt;/a&gt;&lt;/td&gt;";
            if(count==5)
            {
            table=table+"&lt;/tr&gt;&lt;tr&gt;";
            count=1;
            }

        }
        table=table+"&lt;/tr&gt;";
        table = table + "&lt;tr&gt;&lt;th colspan='8' style='padding: 3px;text-align:center;vertical-align:middle'&gt;&lt;a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana&gt;Close&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;";
        table=table+"&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
        var calendarId = 'CalendarControl';
        var Calendar=document.getElementById(calendarId);
        Calendar.innerHTML = table;
        Setposition();
    }

      this.CreateYearTable=CreateYearTable;
     function CreateYearTable(value,M_D_Y)
     {
      var d=new Date();

       if(M_D_Y==2)
       {
        startyr=currentYear+value;
        endyr=currentYear;
       }
       else
       {
           if(value == 11)
            {
            startyr=endyr+1;
            endyr=startyr+value;
            }
            else
            {
            endyr=startyr-1;
            startyr=endyr+value;
            }
       }

        var count=1;
        var table = "&lt;table style=border-color:black;border-style:solid;border-width:1pt;font-family: arial, Verdana, helvetica, sans-serif;&gt;&lt;tr&gt;&lt;td&gt;&lt;table style=table-layout:fixed;width:160px;&gt;";
        table=table+"&lt;tr&gt;&lt;td&gt;&lt;a href='javascript:changeCalendarControlYear(-11,4);'&gt;&lt;img src='Images/PreviousIcon.Bmp' style=border-color:white;&gt;&lt;/img&gt;&lt;/a&gt;&lt;/td&gt;";
        table = table + "&lt;td colspan='5' style='text-decoration:none;font-size:8pt;font-weight:bold;color:black;text-align:center' onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';&gt;"+startyr+" - "+ endyr + "&lt;/td&gt;";
        table = table + "&lt;td&gt;&lt;a href='javascript:changeCalendarControlYear(11,4);'&gt;&lt;img src='Images/NextIcon.Bmp' style=border-color:white;&gt;&lt;/img&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
        table=table+"&lt;/table&gt;&lt;table style=table-layout:fixed;width:160px;height:138px;&gt;&lt;tr&gt;";
        for(var i=startyr;i&lt;=endyr;i++)
        {
            count++;
            table=table+"&lt;td colspan=2 style=text-align:center;height:30px;&gt;&lt;a href=\'javascript:changeCalendarControlYear("+i+",3)' style='text-decoration: none;color:Black; font-size:8pt;vertical-align:bottom;text-align:center;' onmouseover=this.style.color='#5378C1';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=this.style.color='black';this.style.fontWeight='normal';this.style.background='white';&gt;"+i+"&lt;/a&gt;&lt;/td&gt;";
            if(count==5)
            {
            table=table+"&lt;/tr&gt;&lt;tr&gt;";
            count=1;
            }
        }
        table=table+"&lt;/tr&gt;";
        table = table + "&lt;tr&gt;&lt;th colspan='8' style='padding: 3px;text-align:center'&gt;&lt;a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana&gt;Close&lt;/a&gt;&lt;/th&gt;&lt;/tr&gt;";
        table=table+"&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
        var calendarId = 'CalendarControl';
        var Calendar=document.getElementById(calendarId);
        Calendar.innerHTML = table;
        Setposition();   
     }

      this.show = show;
      function show(field) {
         if (dateField == field) 
         {
          return;
         } 
         else 
         {
          dateField = field;
         }

        if(dateField) {
          try {
            var dateString = new String(dateField.value);
            var dateParts = dateString.split("/");
            selectedMonth = parseInt(dateParts[0],10);
            selectedDay = parseInt(dateParts[1],10);
            selectedYear = parseInt(dateParts[2],10);
          } catch(e) {}
        }

        if (!(selectedYear &amp;&amp; selectedMonth &amp;&amp; selectedDay)) {
          selectedMonth = getCurrentMonth();
          selectedDay = getCurrentDay();
          selectedYear = getCurrentYear();
        }

        currentMonth = selectedMonth;
        currentDay = selectedDay;
        currentYear = selectedYear;

        if(document.getElementById){

          calendar = document.getElementById(calendarId);
          calendar.innerHTML = calendarDrawTable();
        Setposition();
        }
      }

    function Setposition()
    {
          var calendarControlFrame=document.getElementById('CalendarControlIFrame');
          calendarControlFrame.style.display="Block";
          calendar.style.display="Block";
          var fieldPos = new positionInfo(dateField);
          var calendarPos = new positionInfo(calendarId);
          var x = fieldPos.getElementLeft();
          var y = fieldPos.getElementBottom();
              x=x+100;
            calendarControlFrame.style.position="Absolute";
            calendarControlFrame.style.background="white";
            calendar.style.position="Absolute";
            calendarControlFrame.style.top=y+"px";
            calendarControlFrame.style.left=x+"px";
            calendar.style.top=y+"px";
            calendar.style.left=x+"px";
    }
      this.hide = hide;
      function hide() {

        if(dateField) {
          setProperty('display', 'none');
          setElementProperty('display', 'none', 'CalendarControlIFrame');
          dateField = null;
        }
      }
    }

    var calendarControl = new CalendarControl();
    function showCalendarControl(ControlNo) {
    var textField;
    if(ControlNo==1)
    {
    textField=document.getElementById('&lt;%=txtFromDate.ClientID%&gt;');
    }
    else
    {
    textField=document.getElementById('&lt;%=txtToDate.ClientID%&gt;');

    }
      calendarControl.show(textField);
    }

    function hideCalendarControl() {
      calendarControl.hide();
    }

    function setCalendarControlDate(year, month, day) {
      calendarControl.setDate(year, month, day);
    }

    function changeCalendarControlYear(change,M_D_Y) 
    {
    switch(M_D_Y)
    {
    case 1:
        //If year navigated in month Table
        var d=new Date();
        calendarControl.createMonthTable(change,d.getFullYear(),"month");
        break;
    case 2:
        //If year selected in Month table
        calendarControl.CreateYearTable(change,M_D_Y);
        break;
    case 3:
        // If Year selected in yearList
        calendarControl.createMonthTable(0,change,"year");
        break;

    case 4:
        //If Year Navigated in Year table
        calendarControl.CreateYearTable(change,M_D_Y);
        break;  
    }
    }
    function changeCalendarControlMonth(change,Month,DateorMonthList) 
    {
      switch(change)
        {
        case 0:
           // for navigating to previous Month in date table
            calendarControl.changeMonth(-1,Month,DateorMonthList);
            break;
        case 1:
           // for navigating to next month in date table
              calendarControl.changeMonth(1,Month,DateorMonthList);
              break;
        case 2:
            // for displaying Month Table
             var d=new Date();
              calendarControl.createMonthTable(0,d.getFullYear(),"month");
              break;
        default:
             var d=new Date();
             calendarControl.createMonthTable(0,d.getFullYear(),"month");
             break;
        }
     }
    document.write("&lt;iframe id='CalendarControlIFrame'  style='border:none;display:none;table-layout:fixed;left:100px;position:absolute;top: 0px;height: 170px;width:168px;z-index: 100;' frameBorder='0' scrolling='no'&gt;&lt;/iframe&gt;");
    document.write("&lt;div id='CalendarControl' style='position:absolute;background-color:#FFF; margin:0; padding:0; display:none;z-index: 100;'&gt;&lt;/div&gt;");
    &lt;/script&gt;
</code></pre>
