Difficulty in implementing cytoscape.js-qtip - qtip2

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
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