7

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.

hp36
  • 269
  • 1
  • 6
  • 20

2 Answers2

9

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.

Jackel Tex
  • 101
  • 1
  • 3
  • I found it useful to use the "solo: true" option in the "show" object. – Kent Shikama Dec 14 '15 at 00:24
  • Yes, but it add a little delay.So now, I commented out 'ready: true'. It's work! Thank you anyway. – Jackel Tex Dec 15 '15 at 02:55
  • As of cytoscape 3.5.0, you have to use the cytoscape qtip extension: https://github.com/cytoscape/cytoscape.js-qtip (or the preferred https://github.com/cytoscape/cytoscape.js-popper extension). Not sure qtip was moved to an extension. – Eric Walker Mar 10 '19 at 20:53
3

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

maxkfranz
  • 11,896
  • 1
  • 27
  • 36