Question

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

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

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

3）最后，只有在从单元格进行鼠标输出时，如何使工具提示消失非常感谢提前！

以下是我的工作代码： LIVE DEMO

代码段：

Right click => Permissions

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,

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

实现此功能还有另外一种不那么hacky和更多支持的可能性：直接在渲染器中添加快速提示。

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

向渲染器添加data-qtip属性：

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

您可以修改QuickTipManager as shown in the sample code from the QuickTipManager documentation中的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
});

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

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

2 个答案: