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

Question

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 t

Answer 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

Answer 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.