ExtJS - Grid Cell Tool Tip - extjs

Question

I am trying to create a tooltip for cells. Below code does that, but tooltip appears only onClick(in mozilla) and in IE tooltip appears on mouseOver but display value of last clicked cell.
I wanted a tooltip on grid in mouseOver with cells content as tooltip display value.
Please suggest any other way to achieve that. Thanks in advance.
var grid = Ext.getCmp('your_grid_id'); // Enter your grid id
initToolTip(grid); // call function
initToolTip: function(grid) {
var view = grid.view;
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);
tip.update(columnText);
}
}
}
});

Answer 1

You could use renderer config for gridcolumn and inside of renderer you could return a html tag with you data-qtip based on your record what you need to show.
You can check here with working FIDDLE.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: 'simpsonsStore',
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return `<span data-qtip="This is ${value}"> ${value} </span>`;
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody()
});
}
});