CODEWITHSUNDEEP
javascriptjquerycytoscape.js
hp36
hp36

Reputation: 279

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.

Upvotes: 8

Views: 19912

Answers (2)

Jackel Tex
Jackel Tex

Reputation: 111

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.

Upvotes: 10

maxkfranz
maxkfranz

Reputation: 12242

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

Upvotes: 3

Related Questions