How to add tooltip on mouseover event on nodes in graph with cytoscape.js

问题

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?

Thanks in advance.

回答1:

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.

Cy.js provides event binding APIs, so you can just bind to mouseover etc on that end: http://cytoscape.github.io/cytoscape.js/#core/events

回答2:

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.

来源：https://stackoverflow.com/questions/20993149/how-to-add-tooltip-on-mouseover-event-on-nodes-in-graph-with-cytoscape-js