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

It seems the tooltip class is missing. Have you called `Ext.QuickTips.init();`? — Tyr, Sep 10 '16 at 18:40
@Tyr No i havent call Ext.QuickTips.init(); where should i call this method? — Mahendra Athneria, Sep 11 '16 at 11:26
Hi @Vinod Gubala.. I tried the same but still getting the same error. — Mahendra Athneria, Sep 12 '16 at 11:35

score 8 · Accepted Answer · answered Sep 13 '16 at 09:24

8

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.

answered Sep 13 '16 at 09:24

Robert Klein Kromhof

506
3
15

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. – Mahendra Athneria Sep 14 '16 at 12:14
Check the updated [Fiddle](https://fiddle.sencha.com/#fiddle/1gm1). A grid behaves differently when using `enableLocking`. The API docs for [enableLocking](http://docs.sencha.com/extjs/6.0.2/classic/Ext.grid.Panel.html#cfg-enableLocking) say this: "A locking grid is processed in a special way. 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. – Robert Klein Kromhof Sep 14 '16 at 12:57

score 1 · Answer 2 · answered Mar 10 '17 at 08:30

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

score 0 · Answer 3 · edited Nov 06 '19 at 14:10

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

ToolTip in Grid cell - ExtJs 6

3 Answers3