javascript - 仅在单击时显示 ExtJS 工具提示

Question

我想在单击按钮时显示一个 ExtJS 工具提示。当用户单击“X”或第二次单击按钮时，工具提示应该消失(注意我没有说“隐藏”)。如果用户第三次点击该按钮，提示应该再次出现。

我的问题是，如果将鼠标悬停在按钮上，工具提示就会出现。 (参见 fiddle )我只希望它是单击按钮的结果。

我已尝试在“onbeforeclose()”和“beforehide()”事件中调用组件上的“remove()”以将其从 DOM 中移除，但悬停时提示仍然显示。

我还想指出，从文档中调用“close()”方法实际上并不会触发“onbeforeclose()”事件——这对我来说真的没有意义……

所有的 Sencha 示例都在悬停时显示提示。甚至可以只在点击事件后显示提示吗？

这是来自 Fiddle 的代码:

function onClick() {
    window.Ext.create('Ext.tip.ToolTip', {
        target: 'div123',
        html: 'I am a tip',
        autoShow: true,
        autoScroll: true,
        focusOnToFront: true,
        autoHide: true,
        closable: true
    });
}

window.Ext.create('Ext.Button', {
    id: 'btn123',
    renderTo: 'div123',
    text: 'click me',
    width: '100px',
    handler: onClick
});

我还想提一下，我知道每次单击按钮时我都会创建一个新的工具提示。我知道，这是理想的行为。我的问题是我希望在您每次单击时显示一个新提示 - 而不是在悬停时显示旧提示。

1. Documentation
2. ExtJS Examples
3. My fiddle

Answer 1

移除 target 将没有任何东西可以悬停。

使用 Ext.tooltip.Tooltip#show在需要时显示工具提示的方法。

保留对创建的工具提示的引用，以便能够 destroy需要的时候。

查看您的 updated fiddle .

最后，您确定要自动隐藏工具提示吗？这似乎与您要实现的总体目标不符...