难以实施cytoscape.js-qtip

Question

第一部分

我发现很难在我的代码中复制cytoscape.js-qtip的功能。

---

以下是JavaScript代码：

   

$(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}}
                });
            }
    }); 
}); 

---

我已经完成了这些主题：

• 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

  ---

浏览器控制台中显示的错误：

  

TypeError： qtip。$ domEle.qtip不是函数

     

文件： cytoscape.js-qtip

     

行： 88

     

Col： 1

     

代码： qtip。$ domEle.qtip（opts）;

---

第二部分

此外，当我尝试提供over here时提供的示例时，我看到点击时没有qtip。

注意： 我尝试过Mozilla Firefox＆amp;谷歌浏览器。

在浏览器控制台中遇到以下错误：

  

  

• Mozilla Firefox

       
    

  • 获取 http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js

         
      
    • [HTTP / 1.1 503服务不可用0ms]
      
    

  • TypeError： qtip。$ domEle.qtip不是函数

    

  • 文件： cytoscape.js-qtip

    

  • 行： 97

    

  • Col： 6

    
  

• Google Chrome：

       
    

  • 获取 https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/70964f0306e770837dbe2b81197c12fdc7804e38/cytoscape-qtip.js runner-3.25.19.min.js：1

    

  • TypeError：对象[object Object]没有方法'qtip'

         
      

    • HTMLDocument。 （http://null.jsbin.com/runner:27:12）

      

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

      

    • ：Function.m.extend.ready（http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:29891）

      

    • HTMLDocument.J（http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js:2:30257）runner-3.25.19.min.js：1

      
    

  • 未捕获的TypeError：对象[object Object]没有方法'qtip'runner：27

         
      

    • （匿名函数）亚军：27

      

    • Ĵ

      

    • k.fireWith

      

    • m.extend.ready

      
    
  

Answer 1

回答第I部分

  

实际的错误是 HTML 文件中导入 的 顺序。

---

<强>错误：

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

---

<强>校正：

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

---

<强>结论：

  

正确的导入顺序

     

  

1. 的jquery-2.0.3.js

  

2. jquery.qtip.js

  

---

<强>原因：

  

导入/加载的顺序非常重要，因为 jquery.qtip.js 依赖于 jquery-2.0.3.js 。< / p>

---

为了更好地理解：

  

阅读： cytoscape.js-qtip#description

---