如何使用cytoscape.js在图上的节点上的鼠标悬停事件上添加工具提示

Question

我想在用cytoscape.js创建的图形中的所有节点上显示关于鼠标悬停事件的节点详细信息。我发现了一个插件qtip，但是这不起作用。我怎样才能做到这一点？还有其他方法可以在节点上显示工具提示吗？

提前致谢。

Answer 1

这对您有帮助。

cy.on('mouseover', 'node', function(event) {
    var node = event.cyTarget;
    node.qtip({
         content: 'hello',
         show: {
            event: event.type,
            ready: true
         },
         hide: {
            event: 'mouseout unfocus'
         }
    }, event);
});

但是当有许多节点时，它仍然保持显示（而不是隐藏）的状态。

Answer 2

您仍然可以使用 QTip。由于 cy.js 没有为每个图形元素关联 DOM 元素，因此您需要 (1) 创建虚拟 HTML DOM 元素来定位 QTips，或者 (2) 使用 QTip API 手动将 QTips 定位到节点。

mouseoverCy.js 提供事件绑定 API，因此您可以在该端绑定到等：http: //cytoscape.github.io/cytoscape.js/#core/events