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.0/examples/form/combos.html#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>'
]
}
});
});