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

我正在尝试为ExtJS（4.2.1）网格中的某些文本获得悬停/工具提示效果。 出于某种原因，工具提示

span

正被几乎所有其他内容所阻挡

似乎是堆叠的问题，但我不确定将

span

放在所有其他行（其他行和网格周围的框架）前面的最佳方法

小提琴：

我试着使用z-index，但没有用。

---

有没有人能告诉我将工具提示范围带到绝对前景的正确方法？

您可以使用Ext.tip.tooltip来实现这一点。在4.2.1文档中，您可以指定dom选择器来委派工具提示“显示/隐藏”

就你而言：

向需要工具提示的单元格添加自定义类

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

---

这是最新的提琴：

这有助于我创建工具提示-我非常感谢；但我仍然想知道，为了我自己的理解，为什么CSS版本不起作用-如果有人有更多的输入，可能你错过了一个“溢出：隐藏”。事实上，将“*{overflow:visible！important；}”添加到css中，工具提示是可见的。您应该在复杂的extjs DOM中搜索设置溢出可见的工具提示容器。您说得对！事实上，如果我在

.x-border-box