How to destroy previous tooltip when hovering over a new item in extjs toolbar text

I have a toolbar which has text item displaying title of the document .Toolbar has a next and perivous button on click of any button new documents loads which loads new title to document. I want to create a tooltip to display title on mouse hover .I am able to create one but have a problem that my previous tooltips are not destroyed.

 Mycode 

  {
                xtype   : 'tbtext',
                id      : 'srcHdr',
                style   : {
                    'width' : '400px',
                    'overflow' : 'hidden',
                    'text-overflow' : 'ellipsis !important'
                },
                reference:'headerTitle',
                html     : ''
            },

Controller

    var srchHeaderTitle = this.lookupReference('headerTitle');
    srchHeaderTitle.update('<b>'
                    + unescape(title.replace('%2B', '+')
                    + '</b>'));

    var tip=Ext.create('Ext.tip.ToolTip', {
           target: 'srcHdr',
           autoHide:true,
           html: srchHeaderTitle
        });

Solution

To set the html dynamically for the tooltip, create it on target component render and then set a before show listener on the tooltip which updates the tooltip.

xtype: 'tbtext',
html: 'Hover to see tooltip',
listeners: {
    'render': function() {
        Ext.create({
            xtype: 'tooltip',
            target: this.getEl(),
            listeners: {
                scope: this,
                beforeshow: function(tip) {
                    tip.setHtml('Tbtext text: ' + this.getEl().getHtml());
                }
            }
        });
    }
}

Here is the fiddle.