如何在具有 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 定位到节点。

Cy.js 提供了事件绑定 API，因此您只需绑定到该端的 mouseover 等：http://cytoscape.github.io/cytoscape.js/#core/events