animation - Ext Js 工具提示在鼠标悬停时停留

Question

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

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,。但是当用户将鼠标悬停到显示的实际工具提示时。我希望该工具提示一直存在，直到鼠标位于其顶部，并在鼠标不在目标(按钮)或实际工具提示上时隐藏。如何实现这一目标？

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

});