防止隐藏 cytoscape qtip

Question

我正在使用 Cytoscape Qtip extension 在您单击节点时显示 qtips。

通常您可以使用 hide: false 选项来防止 qtips 隐藏。使用此功能时，如果它有按钮，您仍然可以隐藏 qtips。

然而，当使用 cytoscape 时，这似乎不起作用。当点击其他地方时，会触发隐藏事件。

cy.elements().qtip({
    content: function(event, api){
        api.set('content.button', true);
        return 'Example qTip on ele ' + this.id();
    },
    position: {
        my: 'top center',
        at: 'bottom center'
    },
    hide: false,
    style: {
        classes: 'qtip-bootstrap',
        tip: {
            width: 16,
            height: 8
        }
    }

    events: {
              hide: function(event, api){
                 console.log(event);
              }
    }
});

我可以通过 event.preventDefault() 阻止隐藏事件继续进行，但这也会阻止关闭按钮隐藏事件，这有点混乱。

知道它的行为方式吗？

Answer 1

如果您需要，可以通过以下方式快速完成这项工作（仅在按钮关闭时关闭）：

    events:{
            hide: function(event, api){


                    if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
                        event.preventDefault();
                    }

    }

解释：

任何鼠标点击都会触发隐藏事件所有可见的 qtips。
我们查看鼠标点击的目标 (event.originalEvent.target.parentElement.parentElement.id) 以查看它关闭了当前尝试关闭的 qtip 框。如果不是，那么我们 preventDefault()。

这可能是非常好的床性能明智的，因为它运行这些 preventDefault() 对于每次鼠标单击时每个打开的 qtip。

Answer 2

请记住，因为这将 Qtip 包装在非 DOM 元素上，所以必须绑定到 Cytoscape 图元素。这些绑定在 DOM 和 Qtip 的控制之外（例如，the hide case）。

您是否尝试将隐藏事件设置为空字符串""？

Answer 3

我发现的最干净的解决方案是为隐藏事件提供垃圾事件。

使用 null、false 或 "" 似乎都不起作用。

hide: {
    event: "asdf" //garbage event to allow hiding on close button click only
},

防止隐藏 cytoscape qtip

Prevent hiding for cytoscape qtip

events

qtip2

cytoscape.js