如何使用工具提示的JavaScript庫（qtip.js）與cytoscape.js

我想一起使用qtip與cytoscape.js到dispaly在節點上的工具提示鼠標懸停事件與cytoscape.js創建圖表在一起。我已經放在裏面準備好以下代碼：function（），如下所示：如何使用工具提示的JavaScript庫（qtip.js）與cytoscape.js

 cy.on('mouseover','node',function (event) { 

     var eid = $(this).data('id'); 

     $(this).qtip({ 
      overwrite: false, 
      content: eid, 
      position: { 
       my: 'right center', 
       at: 'left center', 
       target: $(this) 
      }, 
      show: { 
       event: event.type, 
       ready: true 
      }, 
      hide: { 
       fixed: true 
      } 
     }, event); 

    });

但是，沒有提示在鼠標懸停事件節點顯示。請幫助我。

來源

2014-01-09 hp36

你不能節點或邊緣時。 cystoscape使用canvas，而qtip需要一個節點來附加自己。 – Layke

請參閱回答你類似的問題：http://stackoverflow.com/questions/20993149/how-to-add-tooltip-on-mouseover-event-on-nodes-in-graph-with-cytoscape-js – maxkfranz

我已經嘗試通過使用** cy.on（）**方法來綁定事件，如上面的代碼所示，但它不起作用。請幫忙。 – hp36

提供正確的座標qtip與節點盤旋互動。它可以用cyPosition完成希望這會有所幫助：

   cy.on('mousemove','node', function(event){ 
       var target = event.cyTarget; 
       var sourceName = target.data("source"); 
       var targetName = target.data("target"); 

       var x=event.cyPosition.x; 
       var y=event.cyPosition.y;     


         $("#box").qtip({ 
          content: { 
           title:targetName, 
           text: sourceName 
          }, 
          show: { 
           delay: 0, 
           event: false, 
           ready: true, 
           effect:false 

          }, 
          position: { 
           my: 'bottom center', 
           at: 'top center', 

           target: [x+3, y+3], 
           adjust: { 
            x: 7, 
            y:7 

           } 

          }, 
          hide: { 
           fixed: true, 
           event: false, 
           inactive: 2000 

          }, 


          style: { 
           classes: 'ui-tooltip-shadow ui-tooltip-youtube', 

           tip: 
           { 
            corner: true, 
            width: 24,   // resize the caret 
            height: 24   // resize the caret 
           } 

          } 

        } 
       }); 
      })

此外，您還沒有指定事件目標。處理畫布時不要忘記使用mousemove。

來源

2014-05-04 17:47:04 nyxem1

你可以指定帶有ID **框**的元素嗎？工具提示應該出現在選定的節點上。我將如何獲得選定節點的ID？ – hp36

「box」是工具提示div。把它放在你的cytoscape容器中，像這樣

。在懸停時，您將在工具提示上獲得節點的ID /名稱。通過我的代碼，它會給你提示名稱。只要console.log（目標）弄明白自己 – nyxem1

感謝您的幫助 – hp36

這是我今天找到了最佳解決方案。只需在您的待機功能的代碼，並且除了qtip功能和CSS，包括https://github.com/cytoscape/cytoscape.js-qtip，它會顯示提示點擊

cy.elements().qtip({ 
       content: function(){ return 'Example qTip on ele ' + this.id() }, 
       position: { 
        my: 'top center', 
        at: 'bottom center' 
       }, 
       style: { 
        classes: 'qtip-bootstrap', 
        tip: { 
         width: 16, 
         height: 8 
        } 
       } 
      }); 
      // call on core 
      cy.qtip({ 
       content: 'Example qTip on core bg', 
       position: { 
        my: 'top center', 
        at: 'bottom center' 
       }, 
       show: { 
        cyBgOnly: true 
       }, 
       style: { 
        classes: 'qtip-bootstrap', 
        tip: { 
         width: 16, 
         height: 8 
        } 
       } 
      });

來源

2016-12-31 19:29:21 emir

如何使用工具提示的JavaScript庫（qtip.js）與cytoscape.js

回答

相關問題