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

extjs, panel, tabs, tooltip

Solution

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

Problem

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,

Original source