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

似乎是堆栈问题,但是我不确定将span置于其他所有内容(其他行以及围绕网格的框架)前面的最佳方法。

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

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

最佳答案

您可以使用Ext.tip.ToolTip来实现。与4.2.1文档中一样,您可以委派工具提示show / hide来指定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());
    }
  }
});



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

关于javascript - 带工具提示的ExtJS 4.2.1网格字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35471640/

10-12 12:25
查看更多