Question

Below is the combo code:

Ext.define('Grade', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});
 
Ext.define('GradeCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.gradecombo',
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
        model: 'Grade',
        data: [
            { id: 1, name: 'A' },
            { id: 2, name: 'B' },
            { id: 3, name: 'C' }
        ]
    }
});

And here is the layout code for combo:

Ext.onReady(function(){

Ext.widget('panel', {
    renderTo: 'pan1',
    title: 'Basic Panel',
    width:300,
    height:100,
    defaults: {
        bodyPadding: 10,
        border: false,
        xtype: 'panel',
        layout: 'anchor'
    },
    layout: 'hbox',
    items: [{
                  fieldLabel: 'Grade',
                  xtype: 'gradecombo',
                  width: 234
           }]            
});  
});

I want to display tooltip message for the description of each grade when the user hovers mouse on the drop down of the combo items. Here is the description store:

var store = ['Marks between 70 and 80', 'Marks between 60 and 70', 'Marks between 50 and 60'];

Please let me know how to achieve this.

Regards,

Answer 1

I don’t believe there is a tooltip property that can be set by default, but you can customize completely what shows up in the drop down list by overriding getInnerTpl method of the combobox listConfig property like this:

     listConfig: {
            loadingText: 'Searching...',
            emptyText: 'No matching posts found.',
            // Custom rendering template for each item
            getInnerTpl: function() {
                return '<a class="search-item" href="http://www.sencha.com/forum/showthread.php?t={topicId}&p={id}">' +
                    '<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
                    '{excerpt}' +
                '</a>';
            }
        }

full code sample: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/form/forum-search.js

And most importantly the tip itself. Add the following html attribute to any element you are creating in your template : data-qtip=”This is a quick tip from markup!” You can further control your tooltip by following these guidelines: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tip.QuickTipManager