qtip2 - Difficulty in implementing cytoscape.js-qtip

Question

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

Answer 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

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

---