Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/code.js

Last active April 27, 2017 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save maxkfranz/546dd8ca4872cc87106a to your computer and use it in GitHub Desktop.
Save maxkfranz/546dd8ca4872cc87106a to your computer and use it in GitHub Desktop.
Download ZIP
qTip
Raw
code.js
$(function(){ // on dom ready
var cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
minZoom: 0.5,
maxZoom: 2,
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/
cy.$('#n').qtip({
content: 'Hello!',
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
}); // on dom ready
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>qTip extension</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<script src="code.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cy"></div>
</body>
</html>
Raw
style.css
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0;
padding: 0;
}
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
@nvurgaft
Copy link

in index.html you are importing jquery.qtip.min.js twice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment