Question

我想显示一个ExtJS ToolTip作为按钮点击的结果。当用户点击“X”或第二次点击按钮时，工具提示应该消失（注意我没有说“隐藏”）。如果用户第三次单击该按钮，Tip将再次显示。

我的问题是，如果将鼠标悬停在按钮上，则会显示工具提示。（见小提琴）我只想点击一下按钮就可以了。

我尝试在组件上调用“remove（）”将其从“onbeforeclose（）”和“beforehide（）”事件中的DOM中删除，但提示仍会显示在悬停状态。

我还想注意，从文档中调用“close（）”方法实际上并没有触发“onbeforeclose（）”事件 - 这对我来说真的没有意义......

所有Sencha示例都显示了悬停时的提示。是否可以仅在点击事件后显示提示？

以下是小提琴的代码：

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

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

Answer 1

删除target并且没有任何内容可以悬停。

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

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

查看您的updated fiddle。

最后，您确定要将工具提示自动隐藏吗？这似乎不符合你想要实现的整体......

仅在点击时显示ExtJS工具提示

1 个答案: