How to build a power tooltip for Calendar WebControl in C#

.tooltip
{
    position: absolute;
    border: 1px solid #8EAACE;
    background: #E9F2FF;
    color: black;
    padding: 3px 3px 3px 3px;
    z-index: 1000;
    display: none;
    font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    overflow: hidden;
    /*height: 50px;
    width: 150px;*/
}
.tooltiptitle
{
    font-weight: bold;
    font-size: 12px;
}
.tooltipdetail
{
    font-size: 11px;
}

//In this function you can pass either HTMLText or HTMLObject that you want display in Tooltip
var tooltipID;
var tooltipTitleID = 'dvTooltipTitle'
var tooltipTextID = 'dvTooltipText'
var animationSpeed = 10;
var tooltip;
var tooltipWidth;
var tooltipHeight;
var tooltipShowDelay = 500;  //delay is the number of milliseconds
var tooltipTimer;
var tooltipAnimationTimer;
var isDisplayed = false;
var incrementX = 10;
var incrementY = 10;
function showTooltip(e, containerId, title, text) {
    tooltipID = containerId;
    tooltip = getElement(tooltipID);
    if (typeof title != 'undefined' && title != '') getElement(tooltipTitleID).innerHTML = title;
    if (typeof text != 'undefined' && text != '') getElement(tooltipTextID).innerHTML = text;
    tooltipWidth = parseInt(tooltip.style.width);
    tooltipHeight = parseInt(tooltip.style.height);
    var position = positionTooltip(e);
    tooltipTimer = setTimeout(function () { displayTooltip(position); }, tooltipShowDelay);
}
function displayTooltip(position) {
    clearTimeout(tooltipTimer);
    tooltip.style.left = position.Left + 'px';
    tooltip.style.top = position.Top + 'px';
    //following is for animation
    tooltip.style.height = "0px";
    tooltip.style.width = "0px";
    tooltip.style.display = 'block';
    animateTooltip();
}
function positionTooltip(e) {
    var currentX = (e.x) ? parseInt(e.x) : parseInt(e.clientX);
    var currentY = (e.y) ? parseInt(e.y) : parseInt(e.clientY);
    var mouseX;
    var mouseY;
    var height;
    var width;
    if (typeof (document.documentElement.clientWidth) == 'number') {
        width = document.body.clientWidth;
        height = document.body.clientHeight;
    }
    else {
        width = parseInt(window.innerWidth);
        height = parseInt(window.innerHeight);
    }
    mouseX = ((currentX + tooltipWidth + 10) < width) ? currentX + 10 : mouseX = currentX - tooltipWidth;
    mouseY = ((currentY + tooltipHeight) < height) ? currentY : mouseY = currentY - tooltipHeight - 10;
    if (window.pageYOffset) {
        mouseY = mouseY + window.pageYOffset;
        mouseX = mouseX + window.pageXOffset;
    }
    else {
        mouseY = mouseY + document.body.scrollTop;
        mouseX = mouseX + document.body.scrollLeft;
    }
    return { "Top": mouseY, "Left": mouseX };
}
function hideTooltip(element) {
    clearTimeout(tooltipTimer);
    clearTimeout(tooltipAnimationTimer);
    tooltip.style.width = tooltipWidth + 'px';
    tooltip.style.height = tooltipHeight + 'px';
    tooltip.style.display = 'none';
}
function animateTooltip() {
    var i = parseInt(tooltip.style.width) + incrementX;
    var j = parseInt(tooltip.style.height) + incrementY;
    tooltip.style.width = (i <= tooltipWidth) ? i + "px" : tooltip.style.width = tooltipWidth + "px";
    tooltip.style.height = (j <= tooltipHeight) ? j + "px" : tooltip.style.height = tooltipHeight + "px";
    //Opacity setting
    var maxOriginalSize = Math.max(tooltipWidth, tooltipHeight);
    var maxCurrentSize = Math.max(i, j);
    var opacity = parseInt((100 * maxCurrentSize) / maxOriginalSize);
    setOpacity(tooltip, opacity);
    if (!((i > tooltipWidth) && (j > tooltipHeight)))
        tooltipAnimationTimer = setTimeout("animateTooltip();", animationSpeed);
    else
        clearTimeout(tooltipAnimationTimer);
}
function setOpacity(element, iOpacity) {
    var opacityAsDecimal = iOpacity;
    if (iOpacity > 100)
        iOpacity = opacityAsDecimal = 100;
    else if (iOpacity < 0)
        iOpacity = opacityAsDecimal = 0;
    opacityAsDecimal /= 100;
    if (iOpacity < 1) iOpacity = 1; // IE7 bug, text smoothing cuts out if 0
    element.style.opacity = (opacityAsDecimal);
    element.style.filter = "alpha(opacity=" + iOpacity + ")";
}

function setTooltip() {
    var sPrefix = 'Tooltip.';
    //Getting all the elements from body which are Anchor tag
    var docElemnts = document.getElementsByTagName('a');
    for (var e = 0; e < docElemnts.length; e++) {
        with (docElemnts[e]) {
            //Check founded Anchor tag is belongs to Tooltip
            if (getAttribute('rel') != undefined && getAttribute('rel') != null) {
                var rel = getAttribute('rel');
                //Check whether current element has rel attribute with "Tooltip."
                if (rel.indexOf(sPrefix) >= 0) {
                    var key = rel.split(sPrefix)[1];
                    for (tip in aTooltips) {
                        var str = aTooltips[tip];
                        //Perform a case-sensitive search
                        if (str.search(key) == 0) {
                            var Tooltip = str.split('¦')[1];
                            docElemnts[e].setAttribute('TooltipTitle', Tooltip.split('|')[0]);
                            docElemnts[e].setAttribute('TooltipDescription', Tooltip.split('|')[1]);
                            //Automatically attach mouse over and mouse out event to the Grid Action Button
                            docElemnts[e].onmouseover = attachTooltip;
                            docElemnts[e].onmouseout = function () {
                                hideTooltip('dvTooltip');
                            }
                            break;
                        }
                    }
                }
            }
        }
    }
}
//Attaching event to the current element of the Grid Action Button
function attachTooltip(e) {
    if (!e) var e = window.event;
    showTooltip(e, 'dvTooltip', this.getAttribute('TooltipTitle'), this.getAttribute('TooltipDescription'));
}
//Return object
function getElement(element) {
    if (typeof element == 'object')
        return element;
    else
        return document.getElementById(element);
}

<script language="javascript" type="text/javascript" src="Tooltip.js"></script>
<script language="javascript" type="text/javascript" src="Common.js"></script>
<link href="Tooltip.css" type="text/css" rel="Stylesheet" />

<div id="dvTooltip" class="tooltip" style="height: 50px; width: 160px;">
       <div class="tooltiptitle" id="dvTooltipTitle">
       </div>
       <div class="tooltipdetail" id="dvTooltipText">
       </div>
   </div>

<a href="javascript:void(0)" rel="Tooltip.Search" >Search New</a>