I tried a little more to make the qtip work, but no luck so for. Please share once you made it work.
Thanks, moon On Thu, Feb 18, 2016 at 2:11 AM Balachandar R.A. <balachandar...@gmail.com> wrote: > 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 >>>>> >>>> >>> >
