Hi moon, My bad. Here is the link https://github.com/cytoscape/cytoscape.js-qtip.
The whole cytoscape-qtip project is hosted here and you can find the js file in the below link https://github.com/cytoscape/cytoscape.js-qtip/blob/master/cytoscape-qtip.js regards Bala Thanks On 18 February 2016 at 13:47, moon soo Lee <m...@apache.org> wrote: > 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 >> >
