带有工具提示的 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/