如何在运行时更改ExtJS ToolTip文本？

Question

According to number of questions and articles the simple tip.html = 'new value'; should work but for some reasons it's not the case for me.

Here I have created a demo to demonstrate that tip.html modification doesn't change tip's body after it was rendered once:

http://jsfiddle.net/zcYqe/1/

Steps to reproduce:

Scenario 1:

1. Move mouse over red square to see the tip
2. Press button
3. See the tip isn't changed

Scenario 2:

1. Press button (not - don't put mouse over red square)
2. See the tip's value has changed

What am I missing? How would one change it in runtime (Scenario 1)?

Answer 1

您不能只设置属性，一旦创建了组件，您需要调用一个方法，以便它实际更新底层DOM：

tip.update('new');

Answer 2

You can accomplish this with a beforeshow listener in ExtJS 4.2.x (and probably earlier).

var changeCount = 1;

var tip = Ext.create('Ext.tip.ToolTip', {
    target: 'hoverme',
    html: 'Press this button to clear the form',
    listeners: {
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) {
            tip.update( "Changed " + changeCount + " times" );
            changeCount ++;
        }
    }

});

document.getElementById('btn').addEventListener('click', function(e) {
    tip.html = 'new';
    return false;
})

• Updated copy of your fiddle .
• ExtJS Tooltip docs