带工具提示的ExtJS 4.2.1网格字段

Question

I'm trying to get a hover/tooltip effect for some text in an ExtJS (4.2.1) grid. For some reason, the tooltip span is being occluded by the pretty much everything else.

Seems to be an issue with stacking, but I'm not sure the best way to bring the span in front of everything else (other rows, and the frame surrounding the grid).

Fiddle:
https://jsfiddle.net/z3jj601f/

I tried using z-index to no avail. Can anyone tell me the right way to bring the tooltip span to the absolute foreground?

Answer 1

you could achieve this using a Ext.tip.ToolTip. As in 4.2.1 documentation you can delegate the tooltip show/hide specifying a dom selector.

In you case:

1. Add a custom class to you the cells you want the tooltip for

    columns: [{ ... }, { text: 'Status', dataIndex: 'status', tdCls: 'my-tooltip' } 

2. Create the tooltip with delegate

    var view = grid.getView(); var tip = Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: '.my-tooltip', trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { var record = view.getRecord(Ext.get(tip.triggerElement).up('tr')); // Update tooltip text according to current record tip.update('Over record ' + record.getId()); } } }); 

Here is the updated fiddle: https://jsfiddle.net/gbb5xh74/