Difficulty in implementing cytoscape.js-qtip

问题

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:

displaying qtip hover on outer nodes of cytoscape.js graph
how to use tooltip javascript library qtip.js together with cytoscape.js
how to add tooltip on mouseover event on nodes in graph with cytoscape.js
referencing cytoscape elements from external code
cytoscape.js force-directed layouts and node placement

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:

Mozilla Firefox

GET http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js

[HTTP/1.1 503 Service Unavailable 0ms]

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

File : cytoscape.js-qtip

Line : 97

Col : 6

Google Chrome:

GET https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/70964f0306e770837dbe2b81197c12fdc7804e38/cytoscape-qtip.js runner-3.25.19.min.js:1

TypeError: Object [object Object] has no method 'qtip'

at HTMLDocument. (http://null.jsbin.com/runner:27:12)

at j (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:27244)

at Object.k.fireWith [as resolveWith] (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:28057)

at Function.m.extend.ready (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:29891)

at HTMLDocument.J (http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:30257) runner-3.25.19.min.js:1

Uncaught TypeError: Object [object Object] has no method 'qtip' runner:27

(anonymous function) runner:27

j

k.fireWith

m.extend.ready

回答1:

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

jquery-2.0.3.js

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

来源：https://stackoverflow.com/questions/28672437/difficulty-in-implementing-cytoscape-js-qtip

标签

qtip2

cytoscape.js