ExtJS - How to set a tooltip to a TAB from a Ext.panel.Panel

Question

I have a Ext.Tab,Panel where I have multiple tabs created dynamically.

Each of this tabs contains a Ext.panel.panel. What I need to do is to add a tooltip the the tab. I was trying to do something like this:

Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',

setTabTitle: function() {

    title = 'some title';

  try {
    this.setTitle(title);

    this.getHeader().getEl().set({
        'data-qtip': title
    });
  } catch (e) {

  }
}

Nevertheless, the tab is not the header so it is not applying the tooltip to the tab

Any idea

Edit:

Also found another way to do this:

this.tab.setTooltip('tool tip');

Thanks,

Answer 1

Each tab button is instance of Ext.tab.Tab class. When you creating new panel in tab panel, you can specify configuration for tab button by tabConfig option.

So in tabConfig option you easily specify tab tooltip by:

    tabConfig: {                    
        tooltip: 'Tooltip text'
    }  

This code create new Ext.Tab.Panel with two tabs which have defined tooltip and dynamicly create third one which also have tooltip:

   var tabPanel = Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        items: [{
            title: 'Foo',
            tabConfig: {                    
                tooltip: 'A Foo tab tooltip'
            }                
        }, {
            title: 'Bar',
            tabConfig: {                    
                tooltip: 'A Bar tab tooltip'
            }
        }]
    });

    var dynamiclyCreatedTab = Ext.create('Ext.panel.Panel',{
       tabConfig: {
           title: 'Dynamicly created tab',
           tooltip: 'A Dynamicly created tab tooltip'
       } 
    });

    tabPanel.add(dynamiclyCreatedTab);

See fiddle: https://fiddle.sencha.com/#fiddle/1q8