ExtJS (3.4): Update ToolTip for a Panel in a TabPanel

Question

How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.

Answer 1

You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.

// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
   items: [{
      title: 'one tab',
      tabTip: 'something',
      itemId: 'firstTabID',
      html: 'haha wooo'
   }]
});

// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
   // find its descendent span that contains the tab's title text
   .child('span.x-tab-strip-text', true)
   // and set the tool tip
   .qtip = 'something completely different!';

I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)