Hi Bala, The file http://40.221.94.235/cytoscape-qtip.js looks like not accessible. Could you check if it is correct address?
Thanks, moon On Wed, Feb 17, 2016 at 10:10 PM Balachandar R.A. <balachandar...@gmail.com> wrote: > 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 >
