extjs 悬停在其上时要停留的Ext Js工具提示

1rhkuytd  于 2022-11-05  发布在  其他
关注(0)|答案(4)|浏览(230)

我有一个按钮,当用户悬停在上面时,我会显示一个工具提示。

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,。但当用户悬停到实际显示的工具提示时。我希望工具提示一直显示,直到鼠标在它上面,而当鼠标不在目标(按钮)或实际工具提示上时隐藏起来。这怎么能实现呢?

yqyhoc1h

yqyhoc1h1#

不要依赖Ext为您隐藏工具提示(自动隐藏: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);
    });

});
krugob8w

krugob8w2#

我的两点意见:我的任务是为网格面板列中的工具提示添加相同的行为,但它没有办法在其中传递配置或工具提示(或者可能是我在文档中遗漏了它,在阅读源代码时,如果我有,请评论)。所以我通过在我的应用程序中添加小覆盖来解决它

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

holgip5t3#

试试看:

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

    tooTip.show();
}

从该参考资料中了解更多信息:ToolTip

mtb9vblg

mtb9vblg4#

我用一个变通的方法(jQuery)做了这件事。并使用Span和CSS创建了我自己的工具提示。

相关问题