javascript 如何使用 cytoscape.js 在图表中的节点上添加鼠标悬停事件的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20993149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add tooltip on mouseover event on nodes in graph with cytoscape.js
提问by hp36
I want to show node's details on mouseover event on all nodes in graph created with cytoscape.js. I have found a plug-in qtip, but this is not working. How can i achieve this? Is there some other way to show tooltip on nodes?
我想在使用 cytoscape.js 创建的图表中的所有节点上显示有关鼠标悬停事件的节点详细信息。我找到了一个插件qtip，但这不起作用。我怎样才能做到这一点？有没有其他方法可以在节点上显示工具提示？
Thanks in advance.
提前致谢。
采纳答案by maxkfranz
You can still use QTip. Because cy.js doesn't have associated DOM elements per graph element, you'll need to either (1) create dummy HTML DOM elements to position the QTips or (2) use the QTip API to manually position the QTips to the nodes.
您仍然可以使用 QTip。由于 cy.js 没有为每个图形元素关联 DOM 元素，因此您需要 (1) 创建虚拟 HTML DOM 元素来定位 QTips 或 (2) 使用 QTip API 手动将 QTips 定位到节点。
Cy.js provides event binding APIs, so you can just bind to mouseoveretc on that end: http://cytoscape.github.io/cytoscape.js/#core/events
Cy.js 提供事件绑定 API，因此您可以mouseover在该端绑定到etc：http: //cytoscape.github.io/cytoscape.js/#core/events
回答by Hymanel Tex
This would be help you.
这会帮助你。
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);
});
but it still remains show (not hide) sometime when there are many nodes.
但是当有很多节点时，它仍然会显示（而不是隐藏）。
