CODEWITHSUNDEEP
javascriptextjsextjs4extjs4.2
zerkms
zerkms

Reputation: 254886

How to change ExtJS ToolTip text in runtime?

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)?

Upvotes: 1

Views: 9149

Answers (2)

JD.
JD.

Reputation: 3035

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;
})

Upvotes: 0

Evan Trimboli
Evan Trimboli

Reputation: 30082

You can't just set a property, once the component is created you need to call a method so it actually updates the underlying DOM:

tip.update('new');

Upvotes: 4

Related Questions