Sencha/ExtJs: Add tooltip dynamically for Grid Cell

Simple example to add tooltip dynamically for Grid Cell using custom renderer:

Ext.define('huo.view.DocumentListGridPanel', {
    extend: 'Ext.grid.Panel', 	
    alias : 'widget.documentListGridPanel', 	
 
    [...]
    <!-- layout: 'fit',-->
    height: '100%',
 
    columns: [
	[...]
	{
	    text     : 'Annotation',
	    flex:1,
	    sortable : true,
	    dataIndex: 'annotation',
	    renderer : function(value, metadata, record) {
	      if(record.get('annotation') === ''){
	         return record.get('annotation');
	      }else{
	         myToolTipText = "<b>Annotation</b>";
	         myToolTipText = myToolTipText + "<br/>"+ record.get('annotation');
	         metadata.tdAttr = 'data-qtip="' + myToolTipText + '"';
	         return value;
	      }
	    }
	}
    ],
    viewConfig: {
    }
});

Result:

It is possible to add tooltip to a simple element for example on a docked item button when creating the view:

dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayInfo: true,
        [...]
        items: [
                { 
                    xtype: 'tbseparator' 
                },
                {
                    id : 'myButtonID1',
                    xtype : 'button',
                    text: 'Click me !!',
                    tooltip: 'Tool Tip added on button...'
                },
                {
                    id : 'myButtonID2',
                    xtype : 'button',
                    text: 'Click me 2',
                }
        ]
    }],

It is also possible to add a tooltip on an element from the controller. This way you have more control over the text to display and when to display. Here, adding tooltip for second button in previous example:

init : function() {
    this.control({
        [...]
        'countryList button[id=myButtonID2]' : {
            render : this.onButtonRendered
        }
    });
},

onButtonRendered : function() {
    //create the ToolTip
    Ext.create('Ext.tip.ToolTip', {
        target: 'myButtonID2',
        html: 'Tool Tip added later from the app controller ...'
    });
}

Best regards,