I am trying reciprocate the example seen in the link https://github.com/cytoscape/cytoscape.js-qtip which is tooltip GUI extension for cytoscape, As a standalone code, this works. But, when I port this code in zeppelin paragraph, I do not see the tooltip. Here is the code I tested. Any hint will be highly appreciated. Thanks
%angular <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href=" http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css";> <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js";></script> <script src=" http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js";></script> <script src=" http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js "></script> <script src="http://40.221.94.235/cytoscape-qtip.js";></script> <div id="cy"> <style> body { font-family: helvetica; font-size: 14px; width: 100%; height: 1000px; } #cy { width: 100%; height: 1000px; position: absolute; left: 0; top: 0; z-index: 999; } h1 { opacity: 0.5; font-size: 1em; } </style> <script> $(function(){ var cy = window.cy = cytoscape({ container: document.getElementById('cy'), ready: function(){ }, style: [ // the stylesheet for the graph { selector: 'node', style: { 'background-color': '#666', 'label': 'data(name)' } }, { selector: 'edge', style: { 'width': 1, 'line-color': '#aaa', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' } } ], elements: { nodes: [ { data: { id: 'j', name: 'Jerry' } }, { data: { id: 'e', name: 'Elaine' } }, { data: { id: 'k', name: 'Kramer' } }, { data: { id: 'g', name: 'George' } } ], edges: [ { data: { source: 'j', target: 'e' } }, { data: { source: 'j', target: 'k' } }, { data: { source: 'j', target: 'g' } }, { data: { source: 'e', target: 'j' } }, { data: { source: 'e', target: 'k' } }, { data: { source: 'k', target: 'j' } }, { data: { source: 'k', target: 'e' } }, { data: { source: 'k', target: 'g' } }, { data: { source: 'g', target: 'j' } } ] }, }); // just use the regular qtip api but on cy elements cy.elements().qtip({ content: function(){ return 'Example qTip on ele ' + this.id() }, position: { my: 'top center', at: 'bottom center' }, style: { classes: 'qtip-bootstrap', tip: { width: 16, height: 8 } } }); }); </script> regards Bala
