I'm trying to make a qtip that shows the node name when you mouseover it using the Wine & Cheese example from cytoscape.js
I have already tried to make this solution work, but couldn't: How to add tooltip on mouseover event on nodes in graph with cytoscape.js.
I placed this modified version inside the initCy function of the demo.js file:
cy.on('mouseover', 'node', function(event){
var target = event.cyTarget;
var sourceName = target.data("name");
console.log(event);
console.log(sourceName);
var x = event.cyPosition.x;
var y = event.cyPosition.y;
$("#hovertip").qtip({
content: {
text: sourceName,
},
show: {
delay: 0,
event: true,
ready: true,
},
position: {
my: 'bottom center',
at: 'top center',
target: [x+3, y+3]
},
hide: {
fixed: true,
event: false,
inactive: 2000
},
style: {
classes: 'qtip-bootstrap .qtip-titlebar',
tip:
{
corner: true,
width: 24, // resize the caret
height: 24 // resize the caret
}
}
});
});
I created an empty div on index.html to hold the event:
<div id="hovertip"></div>
When I select the top node of it, it shows a qTip, but it is weirdly placed and that only occurs for that first node.
If I hover a different node, it returns the following error:
Uncaught TypeError: Cannot set property 'event' of null
I managed to find the answer. Using the "info" box that appears when a node is clicked, is now appears as well when you move the mouse over a node. A similar way to make the infobox hide when you mouse out the node can be made using the mouseout event, but it is too fast.
cy.on('mousemove', 'node', _.debounce( function( event ){
var target = event.cyTarget;
var sourceName = target.data("name");
console.log(event);
console.log(sourceName);
if( target.nonempty() ){
showNodeInfo( target );
}
}, 100) );