# ToolTip.js

    /**
     * @class Ext.ToolTip
     * @extends Ext.Tip
     * A standard tooltip implementation for providing additional information when hovering over a target element.
     * @constructor
     * Create a new Tooltip
     * @param {Object} config The configuration options
     */
    Ext.ToolTip = Ext.extend(Ext.Tip, {
        /**
         * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this tooltip.
         */
    // holder
    /***
         * @cfg {Boolean} autoHide True to automatically hide the tooltip after the mouse exits the target element
         * or after the {@link #dismissDelay} has expired if set (defaults to true).  If {@link closable} = true a close
         * tool button will be rendered into the tooltip header.
         */
    // holder
    /***
         * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays after the mouse enters the
         * target element (defaults to 500)
         */
        showDelay: 500,
        /**
         * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the target element but before the
         * tooltip actually hides (defaults to 200).  Set to 0 for the tooltip to hide immediately.
         */
        hideDelay: 200,
        /**
         * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip automatically hides (defaults to 5000).
         * To disable automatic hiding, set dismissDelay = 0.
         */
        dismissDelay: 5000,
        /**
         * @cfg {Array} mouseOffset An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
         */
        mouseOffset: [15,18],
        /**
         * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
         */
        trackMouse : false,
        constrainPosition: true,

        // private
        initComponent: function(){
            Ext.ToolTip.superclass.initComponent.call(this);
            this.lastActive = new Date();
            this.initTarget();
        },

        // private
        initTarget : function(){
            if(this.target){
                this.target = Ext.get(this.target);
                this.target.on('mouseover', this.onTargetOver, this);
                this.target.on('mouseout', this.onTargetOut, this);
                this.target.on('mousemove', this.onMouseMove, this);
            }
        },

        // private
        onMouseMove : function(e){
            this.targetXY = e.getXY();
            if(!this.hidden && this.trackMouse){
                this.setPagePosition(this.getTargetXY());
            }
        },

        // private
        getTargetXY : function(){
            return [this.targetXY[0]+this.mouseOffset[0], this.targetXY[1]+this.mouseOffset[1]];
        },

        // private
        onTargetOver : function(e){
            if(this.disabled || e.within(this.target.dom, true)){
                return;
            }
            this.clearTimer('hide');
            this.targetXY = e.getXY();
            this.delayShow();
        },

        // private
        delayShow : function(){
            if(this.hidden && !this.showTimer){
                if(this.lastActive.getElapsed() < this.quickShowInterval){
                    this.show();
                }else{
                    this.showTimer = this.show.defer(this.showDelay, this);
                }
            }else if(!this.hidden && this.autoHide !== false){
                this.show();
            }
        },

        // private
        onTargetOut : function(e){
            if(this.disabled || e.within(this.target.dom, true)){
                return;
            }
            this.clearTimer('show');
            if(this.autoHide !== false){
                this.delayHide();
            }
        },

        // private
        delayHide : function(){
            if(!this.hidden && !this.hideTimer){
                this.hideTimer = this.hide.defer(this.hideDelay, this);
            }
        },

        /**
         * Hides this tooltip if visible.
         */
        hide: function(){
            this.clearTimer('dismiss');
            this.lastActive = new Date();
            Ext.ToolTip.superclass.hide.call(this);
        },

        /**
         * Shows this tooltip at the current event target XY position.
         */
        show : function(){
            this.showAt(this.getTargetXY());
        },

        // inherit docs
        showAt : function(xy){
            this.lastActive = new Date();
            this.clearTimers();
            Ext.ToolTip.superclass.showAt.call(this, xy);
            if(this.dismissDelay && this.autoHide !== false){
                this.dismissTimer = this.hide.defer(this.dismissDelay, this);
            }
        },

        // private
        clearTimer : function(name){
            name = name + 'Timer';
            clearTimeout(this[name]);
            delete this[name];
        },

        // private
        clearTimers : function(){
            this.clearTimer('show');
            this.clearTimer('dismiss');
            this.clearTimer('hide');
        },

        // private
        onShow : function(){
            Ext.ToolTip.superclass.onShow.call(this);
            Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
        },

        // private
        onHide : function(){
            Ext.ToolTip.superclass.onHide.call(this);
            Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
        },

        // private
        onDocMouseDown : function(e){
            if(this.autoHide !== true && !e.within(this.el.dom)){
                this.disable();
                this.enable.defer(100, this);
            }
        },

        // private
        onDisable : function(){
            this.clearTimers();
            this.hide();
        },

        // private
        adjustPosition : function(x, y){
            // keep the position from being under the mouse
            var ay = this.targetXY[1], h = this.getSize().height;
            if(this.constrainPosition && y <= ay && (y+h) >= ay){
                y = ay-h-5;
            }
            return {x : x, y: y};
        },

        // private
        onDestroy : function(){
            Ext.ToolTip.superclass.onDestroy.call(this);
            Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
            if(this.target){
                this.target.un('mouseover', this.onTargetOver, this);
                this.target.un('mouseout', this.onTargetOut, this);
                this.target.un('mousemove', this.onMouseMove, this);
            }
        }
    });

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.