function CustomTooltip(controlID, targetID){
    this.controlID = controlID;
    this.targetID = targetID;
    this.controlObj = getElement(controlID);
    this.targetObj = getElement(targetID);
    this.showDelay = 700;    // ms
    this.offsetX = 10;
    this.offsetY = 15;
    this.focus = false;
    this.visible = false;
    this.preRender = null;
    this.preRenderParam = null;
    this.timer = null;
    
    this.mouseoverHandler = Function.createDelegate(this, this.onMouseover);
    this.mouseoutHandler = Function.createDelegate(this, this.onMouseout);
    this.mousemoveHandler = Function.createDelegate(this, this.onMousemove);

    $addHandler(this.controlObj, 'mouseover', this.mouseoverHandler);
    $addHandler(this.controlObj, 'mouseout', this.mouseoutHandler);
    $addHandler(this.controlObj, 'mousemove', this.mousemoveHandler);
    this.init();
}

CustomTooltip.prototype.init = function(){
    this.controlObj.title = '';
    this.targetObj.style.display = 'none';
    this.targetObj.style.position = 'absolute';
    this.targetObj.style.zIndex = 99;
}

CustomTooltip.prototype.doShow = function(){
    if(this.preRender) this.preRender(this.preRenderParam)
    this.focus = true;
    var obj = this;
    this.timer = setTimeout(function(){ obj.show(); }, this.showDelay);
}

CustomTooltip.prototype.show = function(){
    if(this.focus){
        this.targetObj.style.display = '';
        this.visible = true;
        clearTimeout(this.timer);
        this.timer = null;
    }
}

CustomTooltip.prototype.hide = function(){
    this.targetObj.style.display = 'none';
    this.visible = false;
    this.focus = false;
}

CustomTooltip.prototype.updatePosition = function(e){
    var evt = (window.event ? window.event : e);        
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

    var x = scrollLeft + evt.clientX + this.offsetX + 'px';
    var y = scrollTop + evt.clientY + this.offsetY + 'px';
    this.targetObj.style.left = x;
    this.targetObj.style.top = y;
}

CustomTooltip.prototype.onMouseover = function(e){
    this.updatePosition(e);
    this.doShow();
}

CustomTooltip.prototype.onMouseout = function(e){
    this.hide();
}

CustomTooltip.prototype.onMousemove = function(e){
    if(!this.visible) this.updatePosition(e);
}