Question

我试图为ExtJS（4.2.1）网格中的某些文本获取悬停/工具提示效果。出于某种原因，工具提示span被其他所有东西所掩盖。

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

小提琴：
https://jsfiddle.net/z3jj601f/

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

Answer 1

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

在你的情况下：

为您想要工具提示

的单元格添加自定义类

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

这是更新的小提琴：https://jsfiddle.net/gbb5xh74/

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

1 个答案: