给一个EXTJS按钮添加提示信息

Question

我正在尝试为我的按钮添加工具提示。我尝试了不同的方法，但当我将鼠标移动到该按钮下面时没有任何反应。这是我尝试添加工具提示时代码的一部分：

this when i created the button called guestButton

 {
    xtype : 'button',
    id : 'guestButton',
    text : 'Guest User',
    handleMouseEvents: true,
    width : 80,
    x : 70,
    y : 150,
    formBind : false,                       
    handler : function() {
    this.up().LoginGuest();
    }

在这里，当我尝试创建工具提示时

    var tooltips = [{
            target: 'guestButton',
            html: 'A very simple tooltip'
        }];
Ext.each(tooltips, function(config) {
        Ext.create('Ext.tip.ToolTip', config);
    });  

Ext.QuickTips.init();

感谢！

- Ahmed

Answer 1

另一种在渲染时添加工具提示的方法。
@chrisuae是正确的，但对我也没有起作用。
有效的方法是在元素渲染时创建工具提示：

   {
        xtype : 'textareafield', 
        grow : true,
        fieldLabel : 'E-Mail-Adressess'
        itemId : 'email',
        afterLabelTextTpl : required,
        allowBlank : false,
        listeners : {
            render: function(c) {
            Ext.create('Ext.tip.ToolTip', {
                target: c.getEl(),
                html: 'You can enter multiple emails here'
            });
           }    
        }
    }

- AswathyPrasad

Answer 2

您可以使用以下代码在ExtJS中定义按钮的提示信息：

xtype : 'button',
id : 'guestButton',
text : 'Guest User',
tooltip: 'A very simple tooltip',

如果您的按钮被禁用，则工具提示将不会显示。这是设计原则，但如果需要，您可以使用一些CSS来覆盖它：

.x-item-disabled, .x-item-disabled * {
    pointer-events:all;
}

在这里查看示例代码。

- chrisuae

Answer 3

感谢您的回答， 我只是删除了这一行handleMouseEvents: true,，神奇地它就起作用了

- Ahmed