当鼠标悬停在上方时,Ext Js Tooltip停留

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启动延迟隐藏,但如果您将鼠标悬停在工具提示上,则取消隐藏.这样,只有当你在500ms之后没有进入工具提示时它才会隐藏.

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

});