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

【问题标题】：How to add tooltip on mouseover event on nodes in graph with cytoscape.js如何使用 cytoscape.js 在图形节点上的鼠标悬停事件上添加工具提示
【发布时间】：2015-09-25 17:45:37
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： javascript jquery cytoscape.js

【解决方案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);
});

但是当有很多节点时它仍然保持显示（而不是隐藏）。

【讨论】：

我发现在“show”对象中使用“solo: true”选项很有用。
是的，但它增加了一点延迟。所以现在，我注释掉了“准备好：真”。这是工作！还是谢谢你。
从 cytoscape 3.5.0 开始，您必须使用 cytoscape qtip 扩展：github.com/cytoscape/cytoscape.js-qtip（或首选的 github.com/cytoscape/cytoscape.js-popper 扩展）。不确定 qtip 是否已移至扩展程序。

【解决方案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

【讨论】：

谢谢@maxkfranz。您能否展示一些示例代码来执行此操作？