Adding Tooltip to combobox with template

[webfriend13]

Hi All,

I am using following code to generate a combobox.

Ext.onReady(function(){
    Ext.create('Ext.form.field.ComboBox', {
        renderTo: Ext.getBody(),
        width: 200,
        queryMode: 'local',
        valueField: 'id',
        displayField: 'name',
        store: {
            fields: ['id', 'name', 'link'],
            data: [
                { id: 1, name: 'A', link: 'http://www.google.com'},
                { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                { id: 3, name: 'C', link: 'http://www.microsoft.com'}
            ]
        },
        listConfig: {
            tpl: [
                '<table width="100%"><tpl for=".">',
                    '<tr>',
                        '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                        '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                    '</tr>',
                '</tpl></table>'
            ]
        }
    });
});

I want to add tooltip to both the columns('TD' tags).

I looked at the following example. But I am able to add tooltip.

http://dev.sencha.com/deploy/ext-4.0...customTplCombo

[vietits]

Try this:

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();


    Ext.create('Ext.form.field.ComboBox', {
        renderTo: Ext.getBody(),
        width: 200,
        queryMode: 'local',
        valueField: 'id',
        displayField: 'name',
        store: {
            fields: ['id', 'name', 'link', 'tip'],
            data: [
                { id: 1, name: 'A', link: 'http://www.google.com', tip: 'Quicktip 1'},
                { id: 2, name: 'B', link: 'http://www.yahoo.com', tip: 'Quicktip 2'},
                { id: 3, name: 'C', link: 'http://www.microsoft.com', tip: 'Quicktip 3'}
            ]
        },
        listConfig: {
            tpl: [
                '<table width="100%"><tpl for=".">',
                    '<tr data-qtip="{tip}">',
                        '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                        '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                    '</tr>',
                '</tpl></table>'
            ]
        }
    });
});

[webfriend13]

Hi Vietits,

Thank you for quick reply. I am able to add tooltip.
Is there any way to add a header to tooltip? So the tooltip should have two sections.
1) Header: Which contains some text
2) Body: Which shows the actual tooltip.

[vietits]

Try this:

Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();


    Ext.create('Ext.form.field.ComboBox', {
        renderTo: Ext.getBody(),
        width: 200,
        queryMode: 'local',
        valueField: 'id',
        displayField: 'name',
        store: {
            fields: ['id', 'name', 'link', 'tip', 'qtitle'],
            data: [
                { id: 1, name: 'A', link: 'http://www.google.com', tip: 'Quicktip 1', qtitle: 'Tip1'},
                { id: 2, name: 'B', link: 'http://www.yahoo.com', tip: 'Quicktip 2', qtitle: 'Tip2'},
                { id: 3, name: 'C', link: 'http://www.microsoft.com', tip: 'Quicktip 3', qtitle: 'Tip3'}
            ]
        },
        listConfig: {
            tpl: [
                '<table width="100%"><tpl for=".">',
                    '<tr data-qtip="{tip}" data-qtitle="{qtitle}">',
                        '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                        '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                    '</tr>',
                '</tpl></table>'
            ]
        }
    });
});