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

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 class 添加到您的网格单元格，然后使用该 CSS class 作为工具提示的委托.

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

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,

但是，uievent 似乎存在一些问题，至少在 Firefox 中，您应该注意这一点。该事件并不总是按预期触发，有时在同一行的列之间移动时不会再次触发，有时在行之间移动时以 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

Answer 2

您不需要为工具提示编写额外的代码，只需为 Flag 列写入渲染函数，并在写入条件中仅显示非空值。喜欢

{
                    text: 'Flag',
                    flex: 1,
                    dataIndex: 'color',
                    renderer: function(value, meta, record) {
                        if(!Ext.isEmpty(value)) 
                            meta.tdAttr='data-qtip="'+value+'"';

                        return value;
                    }
                }

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

How to show tooltip for grid cells?

javascript

extjs

tooltip

extjs4

extjs5