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 this? Is there some other way to show tooltip on nodes?

Thanks in advance.

Extinguisher

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

Pericles

Thanks @maxkfranz. Can you please show some sample code to do this? – Extinguisher

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.

Oblique

I found it useful to use the "solo: true" option in the "show" object. – Cowshed

Yes, but it add a little delay.So now, I commented out 'ready: true'. It's work! Thank you anyway. – Oblique

As of cytoscape 3.5.0, you have to use the cytoscape qtip extension: github.com/cytoscape/cytoscape.js-qtip (or the preferred github.com/cytoscape/cytoscape.js-popper extension). Not sure qtip was moved to an extension. – Scotia