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

Question

我正在尝试为 ExtJS (4.2.1) 网格中的某些文本获得 hover/tooltip 效果。出于某种原因，工具提示 span 被几乎所有其他内容遮挡了。

似乎是堆叠问题，但我不确定将 span 放在其他所有内容（其他行和网格周围的框架）前面的最佳方法。

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

我尝试使用 z-index 无济于事。谁能告诉我将工具提示范围带到绝对前景的正确方法？

Answer 1

您可以使用 Ext.tip.ToolTip 实现此目的。与 4.2.1 文档中一样，您可以委托工具提示 show/hide 指定 dom 选择器。

你的情况：

向您添加自定义 class 您想要工具提示的单元格

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

使用委托创建工具提示

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

这是更新后的 fiddle：https://jsfiddle.net/gbb5xh74/

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

ExtJS 4.2.1 grid field with tooltip

javascript

css

extjs4.2