Update Quicktip on HTML-attribute

[rpieter]

Hi Guys,
I've been searching for this for quite a while now, but can't seem to find an answer/solution anywhere.

The problem is this;
I've got an html-section with a qtip on it;

<span data-qtip="test 123">This is the span 123</span>

When I hover over the span, the tooltip is shown nicely.
(I've called Ext.tip.QuickTipManager.init(); in the beginning of the application)

Then, after an event, I update the html to

<span data-qtip="test 456">This is the span 456</span>

When I hover over the span now, the tooltip still says "Test 123"!
And when I go looking at the DOM (via google inspector), I see this;

<span data-qtip="test 123">This is the span 456</span>

Can anyone explain this?
Is there some listener active that rewrites my HTML?
(I'm sure I'm writing the correct html, I've also printed it with console.log).
Should I manually update the qtip-object that is linked to this piece of html (how can I get that instance??)

Any thoughts on this?
Thank you in advance!

[sriram139]

You need to update span's metadata and set the attribute data-qtip to the new value.
Some thing like this:

metadata.attr = 'data-qtip="' + value + '"';

Since I am not sure on which event you are updating it and how you are initializing the span, couldnt point out exact way to set this one.

[rpieter]

The thing is... I'm generating a block of html to show inside a TD (grid-cell).
And the span is 1 part of that block of html.
So, since there not really is an Ext-object respresenting the span, I'm not sure on how I should set the meta-attribute on it?

[sriram139]

See if this will be helpful:

{
            text: 't',
            renderer : function(value, metaData, record, colIndex, store, view)
	    {		    
			metaData.tdAttr = 'data-qtip="Hii"';
           }             
}

[rpieter]

Alas, that won't do the trick either because that would set the tooltip on the complete TD, while I want to set it on the span inside the TD (there might be several spans with a tooltip in the TD)