Skip to content

Instantly share code, notes, and snippets.

@botev

botev/qtip

Created October 20, 2016 10:25
Show Gist options
  • Save botev/efef3bb21553dd3598708bcdda9a709b to your computer and use it in GitHub Desktop.
Save botev/efef3bb21553dd3598708bcdda9a709b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
qtip
<!doctype html>
<html>
<head>
<title>MNIST</title>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Cytoscape -->
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<!-- Dagre -->
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<!-- Dagre extension -->
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.3.0/cytoscape-dagre.js"></script>
<!-- Cose extension -->
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.3.6/cytoscape-cose-bilkent.js"></script>
<!-- Expand extension -->
<script src="cytoscape-expand-collapse.js"></script>
<!-- Navigator extension -->
<link href="cytoscape.js-navigator.css" rel="stylesheet" type="text/css" />
<script src="cytoscape-navigator.js"></script>
<!-- Qtip extension -->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
<script src="cytoscape-qtip.js"></script>
<style>
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px;
}
#cy {
width: 100%;
height: 90%;
position: absolute;
top: 9%;
bottom: 1%;
left: 0px;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
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/
cy.on('mouseover', '#n', function(e) {
console.log(e);
$(this).qtip({
overwrite: false, // Make sure the tooltip won't be overridden once created
show: {
ready: true // Show the tooltip immediately upon creation
},
content: 'Hello!',
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
}, event); // Pass through our live event to qTip
});
// cy.$('#n').qtip({
// content: 'Hello!',
// position: {
// my: 'top center',
// at: 'bottom center'
// },
// style: {
// classes: 'qtip-bootstrap',
// tip: {
// width: 16,
// height: 8
// }
// }
// });
});
</script>
</head>
<body >
<h1>MNIST</h1>
<b id="collapseAll" style="cursor: pointer;color: darkred">Collapse all</b> / <b id="expandAll" style="cursor: pointer; color: darkslateblue">Expand all</b> <br/>
<b id="collapseRecursively" style="cursor: pointer; color: darksalmon">Collapse selected recursively</b> / <b id="expandRecursively" style="cursor: pointer; color: darkmagenta">Expand selected recursively</b>
<div id="cy"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment