ToolTip in Grid cell - ExtJs 6 - extjs

Question

I am using below code to display Tool Tip for Grid cell In ExtJS 6
{
header: 'Name',
cls: 'nameCls',
locked: true,
tdCls: 'nameTdCls',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdAttr = 'data-qtip= "' + value + '" data-qclass="tipCls" data-qwidth=200';
return value;
}}
When i run the application it doesnt show the tooltip and display below error message.
Any idea guys??
Thanks in advance guys.
Regards,
Mahendra

Answer 1

Have you tried creating an Ext.tip.ToolTip? You can create a single one to serve as tooltip for each name cell (using delegate) and update it with the value of that cell. Set up a grid render listener to create the tooltip like this:
render: function(grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .nameTdCls',
trackMouse: true,
listeners: {
beforeshow: function updateTipBody(tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
tip.update(record.get('name'));
}
}
});
}
For a working example, see this Fiddle.

Answer 2

Thanks for Robert Klein Kromhof!
grid columns:
columns: [{..., tdCls: 'tip'}]
grid listeners:
render: function (grid) {
var view = grid.getView();
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.getId(),
delegate: view.itemSelector + ' .tip',
trackMouse: true,
listeners: {
beforeshow: function (tip) {
var tipGridView = tip.target.component;
var record = tipGridView.getRecord(tip.triggerElement);
var colname = tipGridView.getHeaderCt().getHeaderAtIndex(tip.triggerElement.cellIndex).dataIndex;
tip.update(record.get(colname));
}
}
});
},
destroy: function (view) {
delete view.tip;
}

Answer 3

Create independent function and call when you need.
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);
}
}
}
});
}