Adding tooltip to Extjs Grid panel

ToolTip is Ext.tip.Tip ( xtype:tooltip ). This handles a displaying a tooltip when hovering over a certin element or element on the page.

In this post i will explain how to show the tooltip to the perticular column in the grid.

Using the grid renderer config we can show the tooltip to the column information.


Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'hari', email: 'hari@gmail.com', phone: '555-111-1224' },
        { name: 'sandy', email: 'sandy@gmail.com', phone: '555-222-1234' },
        { name: 'lucy', email: 'lucy@gmail.com', phone: '555-222-1244' },
        { name: 'rita', email: 'rita@gmail.com', phone: '555-222-1254' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name', dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' ,
        renderer: function(value, metaData, record, rowIdx, colIdx, store) {
            metaData.tdAttr = 'data-qtip="' + value + '"';
            return value;
    }}
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Source from Sencha