Ext.onReady(function(){
    Ext.select('.toolTip').on({
        mouseover: function(){
            this.tip = this.title;
            this.title = "";
            var el = Ext.get(this);
            var wrap = Ext.DomHelper.append(el, {
                tag: 'div',
                cls: 'toolTipWrapper'
            }, true);
            Ext.DomHelper.append(wrap, {
                tag: 'div',
                cls: 'toolTipTop'
            });
            Ext.DomHelper.append(wrap, {
                tag: 'div',
                cls: 'toolTipMid',
                html: this.tip
            });
            Ext.DomHelper.append(wrap, {
                tag: 'div',
                cls: 'toolTipBtm'
            });
            Ext.fly(this).setStyle('z-index', 10);
            wrap.setLeft(el.getWidth() - 22);
            wrap.fadeIn({
                duration: .3
            })
        },
        mouseout: function(){
            var wrap = Ext.get(this).down('.toolTipWrapper');
            if (wrap == null) {
                return;
            }
            Ext.fly(this).setStyle('z-index', 0);
            wrap.fadeOut({
                duration: .1
            });
            wrap.remove();
            this.title = this.tip
        }
    })
});