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

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

- Devmix

Answer 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,

然而，在uievent中似乎存在问题，至少在Firefox浏览器中需要注意。该事件并不总是按预期触发，有时在同一行的列之间移动时不会再次触发，有时在行之间移动时会以columnIndex = -1触发。以下屏幕截图是在您的示例页面上拍摄的：

还有另一种不太繁琐且更受支持的实现方法：直接在渲染器中添加快捷提示。

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

在渲染器中添加一个data-qtip属性：

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

您可以在 QuickTipManager 文档中的示例代码中 如下所示 修改 hideDelay：

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

相关的代码片段

- Alexander

---

非常感谢！我有一个快速的问题。您知道如何使工具提示只在鼠标离开时消失吗？我的意思是保持它显示，并且只有在移动鼠标时才让它消失。 - Devmix

@progx 这就是 hideDelay:0 的作用。这是它的文档说明，至少对我来说，它是有效的。 - Alexander

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

- Lokesh Sanaka