悬停时保留 Ext Js Tooltip答案

【问题标题】：Ext Js Tooltip to stay when hover over悬停时保留 Ext Js Tooltip
【发布时间】：2011-04-28 10:18:49
【问题描述】：

我有一个按钮，当用户将鼠标悬停在该按钮上时，我会显示一个工具提示。

function createTooltp(toolTipId) {
 tooTip = new Ext.ToolTip({
 target: toolTipId,            //The button
 anchor: 'left',
 autoWidth: true,
 autoHeight: true,
 closable: false,
 autoHide: true,
 autoHeight : true,
 closable: false,
 contentEl: 'content-tip'
 });
tooTip.show();
}

现在当用户悬停时，它显然会隐藏，因为我提到了autoHide:true,。但是当用户将鼠标悬停在显示的实际工具提示上时。我希望该工具提示一直存在，直到鼠标位于其顶部并在鼠标不在目标（按钮）或实际工具提示上时隐藏。这是如何实现的？

【问题讨论】：

标签： animation extjs tooltip

【解决方案1】：

不要依赖 Ext 为您隐藏工具提示 (autoHide: false)。相反，当您离开工具提示目标和离开工具提示时，使用 window.setTimeout 开始延迟隐藏，但如果您将鼠标悬停在工具提示上，则取消隐藏。这样，它只会在 500 毫秒后不在工具提示上时隐藏。

var toolTip = Ext.create('Ext.tip.ToolTip', {
    target: targetId,
    html: 'ToolTip',
    anchor: 'left',
    dismissDelay: 0,
    showDelay: 0,
    autoHide: false
});

toolTip.on('show', function(){

    var timeout;

    toolTip.getEl().on('mouseout', function(){
        timeout = window.setTimeout(function(){
            toolTip.hide();
        }, 500);
    });

    toolTip.getEl().on('mouseover', function(){
        window.clearTimeout(timeout);
    });

    Ext.get(targetId).on('mouseover', function(){
        window.clearTimeout(timeout);
    });

    Ext.get(targetId).on('mouseout', function(){
        timeout = window.setTimeout(function(){
            toolTip.hide();
        }, 500);
    });

});

【讨论】：

这是一个很好的设计，但有一个错误。您需要清除目标鼠标悬停时的超时。如果不是当您通过单击屏幕上的其他任何位置关闭提示时，超时不会被清除。因此，如果您再次悬停，提示将关闭

【解决方案2】：

我的两分钱：我的任务是为网格面板列中的工具提示添加相同的行为，并且无法在其中传递配置或工具提示（或者我在文档中错过了它，并且在阅读源代码时，请如果我有评论）。所以我通过向我的应用程序添加小的覆盖来解决它

Ext.define('App.overrides.ToolTip', {
    override: 'Ext.tip.ToolTip',
    dismissDelay: 0
});

【讨论】：

【解决方案3】：

试试这个：

function createTooltp(toolTipId) {
    var tooTip = new Ext.ToolTip({
        target: toolTipId, // The button
        anchor: 'left',
        showDelay: 0,
        hideDelay: 0,
        trackMouse: true
    });

    tooTip.show();
}

通过此参考了解更多信息：ToolTip

【讨论】：

在项目列表中。 DismissDelay 不起作用。因为当用户可能在不同的项目上时，它会保持工具提示 15 秒。

【解决方案4】：

我通过解决方法（jQuery）做到了。并使用 Span 和 CSS 创建了我自己的工具提示。

【讨论】：