4

Part I

I am finding it difficult to replicate the functionality of cytoscape.js-qtip in my code.

Here is the JavaScript Code:

$(function()
{ 
    $('#cy').cytoscape
    ({
          style: cytoscape.stylesheet()
            .selector('node').css({'content': 'data(name)'})
            .selector('edge').css({'target-arrow-shape': 'triangle'})
            .selector(':selected').css({'line-color': 'black'})
          elements: {
                nodes: [ 
                        { data: { id: '1', name: '1' } },
                        { data: { id: '2', name: '2' } },
                    ],
                edges: [{ data: { source: '1', target: '2' } }]
            },
          layout: { name: 'grid'},
          ready: function()
            {
                window.cy = this;
                cy.panzoom({});
                cy.cxtmenu
                ({  commands:[{ content: '<span class="fa fa-flash fa-2x"></span>',
                                select: function()  {console.log( this.id() );}
                              },
                              { content: '<span class="fa fa-star fa-li "></span>',
                                select: function(){ console.log( this.data('name') );}
                              },
                              { content: 'Text',
                                select: function(){ console.log( this.position() );}
                              }
                ]});
                cy.elements().qtip
                ({
                    content: function(){ return 'this is tool tip for ' + this.id() },
                    position: { my: 'top center',at: 'bottom center'},
                    style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
                });

                cy.qtip
                ({
                    content: 'tool tip about the core of the layout',
                    position: { my: 'top center', at: 'bottom center'},
                    show: { cyBgOnly: true},
                    style: {classes: 'qtip-bootstrap',tip: {width: 16,height: 8}}
                });
            }
    }); 
});

I have already gone through these threads:

Errors shown in Browser Console:

TypeError: qtip.$domEle.qtip is not a function

File : cytoscape.js-qtip

Line : 88

Col : 1

Code : qtip.$domEle.qtip( opts );

Part II

Also when I am trying the example provided over here, I see no qtip on tapping.

Note: I tried on both Mozilla Firefox & Google Chrome.

And encountered the following Errors in the Browser Console:

Community
  • 1
  • 1
vstack
  • 91
  • 1
  • 10
  • Have you tried the example that comes with the extension? – maxkfranz Mar 05 '15 at 14:07
  • Yes Sir. I have tried examples for both **qtip** as well as for **ctxtmenu** - they work fine. In fact it works absolutely fine when I merged the two examples to get the two functionality i.e ___qtip and the ctxtmenu___ together. But when I tried implementing the same on the above code, it does not work. I apologize if my issue is silly. I am new to this. Thanking you in advance. – vstack Mar 09 '15 at 06:55

1 Answers1

3

Answer to Part I

The actual mistake was in the order of importing of JavaScript within the HTML file.

Mistake:

<script src="jquery.qtip.js"></script>
<script src="jquery-2.0.3.js"></script>

Correction:

<script src="jquery-2.0.3.js"></script>
<script src="jquery.qtip.js"></script>

Conclusion:

Correct Order of importing

  1. jquery-2.0.3.js

  2. jquery.qtip.js

Reason:

The order of importing/ loading is important as jquery.qtip.js is dependent on jquery-2.0.3.js.

For better understanding:

Read : cytoscape.js-qtip#description

Community
  • 1
  • 1
vstack
  • 91
  • 1
  • 10