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

Question

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

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

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

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

Answer 1

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

在你的情况下：

1. 为你想要工具提示的单元格添加一个自定义类

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

2. 使用委托创建工具提示

   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/