将工具提示添加到EXTJS按钮

时间:2017-05-09 16:27:44

标签: javascript extjs tooltip

我正在尝试向我的按钮添加工具提示,我尝试了不同的方式,但是当我将鼠标放在按钮下时没有任何反应,当我尝试添加此工具提示时,这是我的代码的一部分 当我创建名为guestButton

的按钮时
integration

,此时我尝试创建工具提示

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

谢谢!

3 个答案:

答案 0 :(得分:5)

在渲染时添加工具提示的另一种方法。左@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'
            });
           }    
        }
    }

答案 1 :(得分:3)

您应该能够使用以下方法为ExtJS中的按钮定义工具提示:

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

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

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

请参阅小提琴here

答案 2 :(得分:0)

感谢您的回答, 我只是简单地删除了这一行handleMouseEvents: true,