Ext Button tooltip 位置

 

上面的按钮的tooltip实现在按钮的右下，出于某种需要，需要使tooltip显示在其他位置，比如 上方

 

试了下一般情况下的tooltip是可以实现这个需求的 anchor：'bottom' anchor：'top'

 

但button的tootlip不行

 

遂查看源码 :

Button.js

initButtonEl : function(btn, btnEl){
        this.el = btn;

        if(this.id){
            this.el.dom.id = this.el.id = this.id;
        }
        if(this.icon){
            btnEl.setStyle('background-image', 'url(' +this.icon +')');
        }
        if(this.tabIndex !== undefined){
            btnEl.dom.tabIndex = this.tabIndex;
        }
        if(this.tooltip){
            this.setTooltip(this.tooltip, true);
        }

 

setTooltip : function(tooltip, /* private */ initial){
        if(this.rendered){
            if(!initial){
                this.clearTip();
            }
            if(Ext.isObject(tooltip)){
                Ext.QuickTips.register(Ext.apply({
                      target: this.btnEl.id
                }, tooltip));
                this.tooltip = tooltip;
            }else{
                this.btnEl.dom[this.tooltipType] = tooltip;
            }
        }else{
            this.tooltip = tooltip;
        }
        return this;
    },

 

Button实际上调用的是

Ext.QuickTips.register(Ext.apply({
                      target: this.btnEl.id
                }, tooltip));

QuickTips.js

/**
         * Configures a new quick tip instance and assigns it to a target element.  See
         * {@link Ext.QuickTip#register} for details.
         * @param {Object} config The config object
         */
        register : function(){
            tip.register.apply(tip, arguments);
        },

 QuickTips调用的是QuickTip的register

 

QuickTip.js

 /**
     * Configures a new quick tip instance and assigns it to a target element.  The following config values are
     * supported (for example usage, see the {@link Ext.QuickTips} class header):
     * <div class="mdetail-params"><ul>
     * <li>autoHide</li>
     * <li>cls</li>
     * <li>dismissDelay (overrides the singleton value)</li>
     * <li>target (required)</li>
     * <li>text (required)</li>
     * <li>title</li>
     * <li>width</li></ul></div>
     * @param {Object} config The config object
     */
    register : function(config){
        var cs = Ext.isArray(config) ? config : arguments;
        for(var i = 0, len = cs.length; i < len; i++){
            var c = cs[i];
            var target = c.target;
            if(target){
                if(Ext.isArray(target)){
                    for(var j = 0, jlen = target.length; j < jlen; j++){
                        this.targets[Ext.id(target[j])] = c;
                    }
                } else{
                    this.targets[Ext.id(target)] = c;
                }
            }
        }
    },

 

这里看注释就明白了

The following config values are supported (for example usage, see the Ext.QuickTips class header):

• autoHide
• cls
• dismissDelay (overrides the singleton value)
• target (required)
• text (required)
• title
• width

只支持这几种属性，里面没有配置anchor的

 

 

 

 

 

 

==================================================

http://www.extjs.com/forum/showthread.php?t=27886 相关的帖子

Ext.QuickTips.init()
Ext.apply( Ext.QuickTips.getQuickTip(), {
    defaultAlign:'l-r',
    maxWidth:500,
    minWidth:200,
    showDelay:200
});