2017-11-14 103 views
0

mouseoverイベントでツールチップを表示しようとしています。cytoscape.js qtipを使用しています。ツールチップは、マウスがグラフのノード上にあるときに表示されますが、ノードの下部に表示されるのではなく、グラフの左上のの隅に配置されます。ここでグラフを表示するためのコードは次のとおりです。qtipがcytoscape.jsの適切な位置にツールチップを表示しない

this.cyto = cytoscape({ 
    container: document.getElementById("graph"), 
    layout: { 
     name: 'spread', 
     minDist: 200 
     }, 
    elements: this.graph.elements, 
    style: this.cy_style 
}); 

は、ここに追加私はqtip

this.cyto.nodes().forEach(function (element) { 
    var nodeName = element.data("name"); 
    if (nodeName) { 
     element.qtip({ 
      content: { 
       text: nodeName 
      }, 
      position: { 
       my: 'bottom center', 
       at: 'bottom center', 
       adjust: { 
        y: 50, 
        mouse: false 
       } 
      }, 
      show: { 
       event: 'mouseover' 
      }, 
      hide: { 
       event: 'click mouseout' 
      }, 
      style: { 
       classes: 'qtip-bootstrap' 
      } 
     }); 
    } 
}); 

を追加するために使用していたコードはここでツールチップは、現在表示されている方法を示すスクリーンショットです:

qtip-screenshot

上記の画像からわかるように、ツールチップはグラフの左上隅に表示されます。私は適切な位置にツールチップ表示を行うことができますどのように

qtip-proper

:しかし、私はこのようなツールチップを表示するようにしたいですか?私はここで間違って何をしていますか?

答えて

関連する問題