JavaScript - Cytoscape Web nodes add jQuery qTip plugin

之前有提到過建立基本的Cytoscape Web，而如果當我們幫node加上click Listener，並且呈現

tooltip的區塊，如此可以讓node提供額外的訊息。在此要說明的是如何搭配jQuery qTip plugin

做到較為強大且華麗的tip功能！

處理node click listener的程式碼如下：

vis = new org.cytoscapeweb.Visualization(div_id, options);
// callback when Cytoscape Web has finished drawing
var currnode;
var tooltipapi;
vis.ready(function() {
    vis.addListener("click", "nodes", function(evt) {
        if(typeof currnode == 'undefined'){
           currnode = evt.target;
        }else if(currnode != evt.target){
           if(!tooltipsapi.destroyed)
               tooltipsapi.destroy();
               tooltipsapi = undefined;
               currnode = evt.target;
           } 
           var tooltips = $(currnode).qtip({
               content: {
                  text:"<font color='#668866' size=2><b>"+currnode.data.label+"</b></font>",
                  title: {
                      text:currnode.data.label
                  }
               },
               position: {
                  target: [currnode.x+(currnode.width/2), currnode.y+40]
               },
               style: {
                  classes: 'qtip-light'
               },
               show: { 
                  event:'click', 
                  delay: 0 , 
                  effect: function(offset) {
                     $(this).slideDown(100);
                  },
                  solo: true,
                  ready: true
               },
               hide: {
                  event: 'unfocus',
                  fixed: true
               }
          });
          tooltipsapi = tooltips.qtip('api');
     }).addListener("click", function(evt) {
          if(typeof tooltipsapi != 'undefined'){
              tooltipsapi.destroy();
          } 
     });
  });
});

注意！div_id, options變數主要在第一篇有講到，這邊就不帶出了。

currnode主要是針對當我點擊到的node，取其node object，這個node我們可以利用其x, y 屬性，

如此便可以設定tooltip block的position及label，而show的部分，主要是說明tip是在什麼情況下

出現，此設定為click，而時機是在$(currnode).qtip(...)這個範圍的情況下(click node)，如果您

設定為$("body").qtip(...)  那麼當您點擊body的範圍，就會出現tip。

hide的設定為event unfocus，表示當您的node為unfocus就會隱藏起來！如點擊其他node時，原

本的node旁的tip便會消失，而.addListener("click", function(evt) {...這段是針對點擊到cytoscape

的區域就會觸發的情況。

而小弟使用了這段tooltipsapi.destroy();的意義是，如果不destroy的話，就會產生很多的tip

，當tip隱藏起來，在去點擊其他的node又會產生tip div，因此如果不間斷的點擊就會產生很

多div的隱藏tip，所以在這邊就會將其destroy。

點擊node

若不destroy會出現的情況，如此qtip區塊會一直產生

基本上qTip有很多功能，細部的部分可以去官網上查詢！

http://qtip2.com/