CODEWITHSUNDEEP
javascriptcssextjs4.2
Black
Black

Reputation: 5367

ExtJS 4.2.1 grid field with tooltip

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?

Upvotes: 1

Views: 567

Answers (1)

Federico Baron
Federico Baron

Reputation: 997

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/

Upvotes: 1

Related Questions