Combo box items tool tip not displayed

Question

Hello,

I have written a combo box populated with items in ExtJs framework. I could not able to get the tooltips when the user hovers over the items.

Below is the code:

$formPanel .= " new Ext.form.ComboBox({
                tpl:'<tpl for =\".\"><div ext:qtip=\"{abbr}\" class=\"x-combo-list-item\">{state}</div></tpl>',
id:'type_blackout_weekly',
  store: sstore,
  displayField:'state',
  typeAhead: true,
  mode: 'local',
  triggerAction: 'all',
  emptyText:'Select a state...',
  selectOnFocus:true,
  forceSelection: true,
  width:135
}),";

var statedata = [
  ['AL', 'Alabama'],
  ['AK', 'Alaska'],
  ['AZ', 'Arizona'],
  ['WV', 'West Virginia'],
  ['WI', 'Wisconsin'],
  ['WY', 'Wyoming']
];

var sstore = new Ext.data.SimpleStore({
  fields: ['abbr', 'state'],
  data : statedata 
});

Any guidance is highly appreciated.

Answer 1

Please take my answer with a grain of salt, as I have never used ExtJS. My experience with combo boxes is that browsers I tested (IE6/7, Firefox 3.0) did not trigger an onMouseOver event when hovering over the box's options, nor did they display title attribute values.

This, of course, only applies to vanilla HTML combo boxes (select elements with multiple="true"). If ExtJS has a custom combo box, please disregard my answer. :)

Answer 2

I assume that you are using this example (the second one on that page) as your starting point? tpl should refer to a valid template like that shown in the sample (of course it looks like you are using "abbr" instead of "nick" as in the sample -- make sure all data fields match). Your template as defined does not define any tooltip markup. E.g.:

'<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'

If it's still not working, make sure you initialized the quick tips singleton somewhere before your code:

Ext.QuickTips.init();