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

【问题标题】：How to show tooltip for grid cells?如何显示网格单元格的工具提示？
【发布时间】：2018-10-25 19:15:36
【问题描述】：

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

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

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

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

这是我的工作代码： LIVE DEMO

代码 sn-p：

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));
            }
        }
    }
});

【问题讨论】：

标签： javascript extjs extjs4 tooltip extjs5

【解决方案1】：

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

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中修改hideDelayas 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

【讨论】：

非常感谢！一个快速的问题。你知道如何让工具提示仅在执行 mouseleave（鼠标离开）时消失吗？我的意思是如何保持它显示并使其仅在鼠标移开时消失
@progx 这就是hideDelay:0 所做的。这就是它的记录方式，至少对我来说，它是有效的。

【解决方案2】：

您不需要为工具提示编写额外的代码，仅用于标记列写入渲染功能，并在编写条件时仅显示非空值。喜欢

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

                        return value;
                    }
                }

【讨论】：