javascript - 如何显示网格单元格的工具提示？

Question

我有一个网格，当鼠标悬停在一个单元格上时，每个单元格都会显示一个工具提示。效果很好。但是，我有几个问题:

1) 我只想显示标记列下单元格的工具提示。

2) 如果单元格没有值，则不显示工具提示。

3) 最后，如何使工具提示仅在从单元格进行鼠标移出时消失非常感谢!

这是我的工作代码: LIVE DEMO

代码片段:

grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.el,
    delegate: '.x-grid-cell',
    trackMouse: true,
    listeners: {
        beforeshow: function updateTipBody(tip) {
            if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                header = grid.headerCt.getGridColumns()[grid.cellIndex];
                tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
            }
        }
    }
});

Answer 1

1) 您必须通过渲染器将自定义 CSS 类添加到您的网格单元格，然后将该 CSS 类用作您的工具提示的委托(delegate)。

2) 您可以根据渲染器中的值或其他记录值完全控制要添加 CSS 类的单元格。如果值为空，则不要将自定义 CSS 类添加到网格单元格。

3) hideDelay: 0在工具提示上。

所需的代码更改:

dataIndex: 'color',
renderer: function(v, meta) {
    if(v) meta.tdCls = 'customCls';
    return v;
}

和

target: view.el,
delegate: '.customCls',
trackMouse: true,
hideDelay: 0,

但是，至少在 Firefox 中，uievent 似乎存在问题，您应该注意这一点。该事件并不总是按预期触发，有时在同一行的列之间移动时不会再次触发，有时在行之间移动时以 columnIndex = -1 触发。以下屏幕截图已在您的示例页面上截取:

还有另一种更简单、更受支持的实现方法:直接在渲染器中添加快速提示。

为此，删除所有自定义工具提示代码。

向渲染器添加一个 data-qtip 属性:

dataIndex: 'color',
renderer: function(value, meta, record) {
    if(value) meta.tdAttr='data-qtip="'+value+'"';
    return value;
}

可以修改QuickTipManager中的hideDelay as shown in the sample code from the QuickTipManager documentation :

// Init the singleton.  Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    hideDelay: 0
});

Relevant fiddle