I am trying to always show a qtip on a node even if the node is moved.
In the free event, I am using the api of the qtip to show it and reposition it.
The reposition method of the API is not working in this case because the qtip is still shown at its original place.
I used the demo from https://gist.github.com/maxkfranz/546dd8ca4872cc87106a and I have modified the file code.js (I have tried to updload the modified demo as a Zip file however I keep getting the error "We don’t support that file type. Choose Files Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, PDF, or ZIP.") :
I am trying to always show a qtip on a node even if the node is moved.
In the free event, I am using the api of the qtip to show it and reposition it.
The reposition method of the API is not working in this case because the qtip is still shown at its original place.
I used the demo from https://gist.github.com/maxkfranz/546dd8ca4872cc87106a and I have modified the file code.js (I have tried to updload the modified demo as a Zip file however I keep getting the error "We don’t support that file type. Choose Files Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, PDF, or ZIP.") :
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false, autounselectify: true,
elements: { nodes: [ { data: { id: 'n', label: 'Tap me' } } ] },
layout: { name: 'grid', padding: 100 },
ready: function(){ window.cy = this; },
style: 'node { content: data(label); }' });
// you can use qtip's regular options // see http://qtip2.com/ var node = cy.$('#n').qtip({ content: 'Hello!', position: { my: 'top center', at: 'bottom center' }, style: { classes: 'qtip-bootstrap', tip: { width: 16, height: 8 } }, show: {ready: true} });
cy.on('free', function(evt){ var api = node.qtip('api'); api.reposition(); api.show(); api.reposition(); });
}); // on dom ready