ToolTip in Grid cell - ExtJs 6

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

Solution 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.

Solution 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;
            }

Comments

[Mahendra Athneria]

Thanks for your reply. I forget to mention one point that i am using locked grid. In my grid initial 3 columns are locked & remaning are unlocked. For locked columns i have used "locked: true" property. When i put the same in your example it stops working. Any idea why it is not working when i add one column as locked.

[Robert Klein Kromhof]

Check the updated Fiddle. A grid behaves differently when using enableLocking. The API docs for enableLocking say this: "A locking grid is processed in a special way. <snip> This Panel becomes merely a container which arranges both in an HBox layout.". I've changed the example a bit, mostly by moving the render listener to lockedViewConfig. Take a look.