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

Answer 2

试试这个：

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

    tooTip.show();
}

参考：

TooolTip

Answer 3

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

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

Answer 4

我做了一个解决方案（jQuery）。并使用Span和CSS创建自己的工具提示。

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

4 个答案: