Extjs4 set tooltip on each column hover in gridPanel

Question

I am getting tooltip on mouse hover by each row for current column but I am unable to get next column tooltip on continue hover on same row.

But I can get it if I hover on another row & again hover any column of the previous row by using:

listeners:{
'itemmouseenter': function (view, record, item, index, e, eOpts) {
        var gridColums = view.getGridColumns();
        var column = gridColums[e.getTarget(this.view.cellSelector).cellIndex];
        Ext.fly(item).set({ 'data-qtip': 'Des:' + column.dataIndex });

  }
}

Can anyone show me what I'm missing or point me in the right direction?

score 31 · Answer 1 · answered Mar 05 '12 at 23:37

31

I have an easy one, using the renderer function:

{
    xtype : 'gridcolumn',
    dataIndex : 'status',
    text : 'Status',
    renderer : function(value, metadata) {
                    metadata.tdAttr = 'data-qtip="' + value + '"';
                    return value;
                }
}

answered Mar 05 '12 at 23:37

inakiabt

1,953
1
16
28

I have a follow up question to this.. I want to have a grid plugin or feature which sets a custom tooltip using the above implementation. Question is how can I add my stuff to the renderer function but at the same time not take away a user defined renderer function being used for a particular grid. Essentially I want to add the tooltip feature for all grids, but not take away the ability to specify custom renderers for some columns on some of the grids. – dreamerkumar Aug 30 '13 at 15:03
1

rixo answered this one for me here: http://stackoverflow.com/questions/18536202/extjs-create-a-grid-feature-or-grid-plugin-that-sets-a-tooltip-for-each-column-i/18536873?noredirect=1#comment27264689_18536873 – dreamerkumar Aug 30 '13 at 17:51

score 5 · Accepted Answer · answered Nov 15 '11 at 23:32

I was looking through this. I could manage to get the tool tip for each cell by doing something like this:

 Ext.getCmp('DynamicDemandGrid').getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        // The overall target element.
        target: view.el,
        // Each grid row causes its own seperate show and hide.
        delegate: view.cellSelector,
        // Moving within the row should not hide the tip.
        trackMouse: true,
        // Render immediately so that tip.body can be referenced prior to the first show.
        renderTo: Ext.getBody(),
        listeners: {
            // Change content dynamically depending on which element triggered the show.
            beforeshow: function updateTipBody(tip) {
                var gridColums = view.getGridColumns();
                var column = gridColums[tip.triggerElement.cellIndex];
                var val=view.getRecord(tip.triggerElement.parentNode).get(column.dataIndex);
                tip.update(val);
            }
        }
    });
});

Let me know if it helps

score 2 · Answer 3 · edited Oct 26 '12 at 06:12

2

{
    text: name,
    width: 80,
    dataIndex: dataIndex,
    sortable: true,
    listeners: {
        afterrender: function ()
        {
            Ext.create('Ext.ToolTip',
            {
                target: this.getEl(),
                anchor: direction | "top",
                trackMouse: true,
                html: this.text
            });
        }
    }
}

edited Oct 26 '12 at 06:12

Jason Sturges

15,855
14
59
80

answered Apr 24 '12 at 07:38

Artur Shaikhullin

155
1
8

Extjs4 set tooltip on each column hover in gridPanel

3 Answers3

Linked