Hi moon, Thanks for the effort. I will check that. Initially, I just copied the example demo code in a plain notepad and saved it as .html. When I opened this file in the browser, I could see the tooltip exactly as explained in the github sources.
Now, when I ported this code in zeppelin, i could not see it working. Perhaps, if you can replicate what I have done, you may observe few more information. Nevertheless, I will come back to you once I see the error in my side. Thanks Bala On 18 February 2016 at 14:29, moon soo Lee <m...@apache.org> wrote: > With proper cytoscape-qtip address, i'm getting following error. > > Uncaught TypeError: cy.elements(...).qtip is not a function > > You can also see error in Developer console in your browser, when you run > zeppelin-web in devmode. > > (see Run the application in dev mode > https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/README.md#configured-environment > for devmode) > > Thanks, > moon > > > On Thu, Feb 18, 2016 at 12:34 AM Balachandar R.A. < > balachandar...@gmail.com> wrote: > >> 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 >>>> >>> >>
