Q:

Extjs4 display tooltip for accordion item headers

Is there are any way to add tooltip for Extjs accordion item headers.I am using tree panel for accordion item.
My accordian panel
Ext.create('Ext.Panel', {
    region: 'west',
    split: true,
    width: '20%',
    collapsible: true,
    title: 'Accordian',
    iconCls: 'application-side-tree',
    layout: 'accordion',
    items: [
        Ext.create('Ext.tree.Panel', {
        id: 'tree-1',
        store: Store1,
        title: 'First item tree',
        rootVisible: false,
        layout: 'fit',
        draggable: false
    }),
        Ext.create('Ext.tree.Panel', {
        id: 'tree-2',
        store: Store2,
        title: 'Second item tree',
        rootVisible: false,
        layout: 'fit',
        draggable: false
    })
        ],
});

A:

You can use QuickTips for example:
var panel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    width: '80%',
    title: 'Accordian',
    layout: 'accordion',
    items: [
        Ext.create('Ext.panel.Panel', {
            title: 'First item tree',
            tooltip: 'tip 1',
            html: 'blah blah'
        }),
        Ext.create('Ext.panel.Panel', {
            title: 'Second item tree',
            tooltip: 'tip 2',
            html: 'blah blah'
        })
    ],
    height: 200
});

panel.items.each(function(p) {
    Ext.create('Ext.tip.ToolTip', {
        target: p.header.id,
        html: p.tooltip
    });
});

Ext.QuickTips.init();

Working sample: http://jsfiddle.net/r4tt5/

