I want to use qtip together with cytoscape.js to dispaly tooltips in nodes on mouseover event in graph created with cytoscape.js. I have placed following code inside ready: function() as shown below:
cy.on('mouseover','node',function (event) {
var eid = $(this).data('id');
$(this).qtip({
overwrite: false,
content: eid,
position: {
my: 'right center',
at: 'left center',
target: $(this)
},
show: {
event: event.type,
ready: true
},
hide: {
fixed: true
}
}, event);
});
But, there is no tooltip displaying in node on mouseover event.. Please help me.
Provide the correct coordinate to qtip to interact with node hovering. It can be done with cyPosition Hope this helps:
cy.on('mousemove','node', function(event){
var target = event.cyTarget;
var sourceName = target.data("source");
var targetName = target.data("target");
var x=event.cyPosition.x;
var y=event.cyPosition.y;
$("#box").qtip({
content: {
title:targetName,
text: sourceName
},
show: {
delay: 0,
event: false,
ready: true,
effect:false
},
position: {
my: 'bottom center',
at: 'top center',
target: [x+3, y+3],
adjust: {
x: 7,
y:7
}
},
hide: {
fixed: true,
event: false,
inactive: 2000
},
style: {
classes: 'ui-tooltip-shadow ui-tooltip-youtube',
tip:
{
corner: true,
width: 24, // resize the caret
height: 24 // resize the caret
}
}
}
});
})
also you are not specifying event target. And don't forget to use mousemove while dealing with canvas.