Question

我正在尝试使用cytoscape.js中的Wine & Cheese示例将鼠标悬停在节点上时显示一个节点名称的qtip

我已经尝试过使此解决方案起作用，但是不能： How to add tooltip on mouseover event on nodes in graph with cytoscape.js。

我将此修改后的版本放置在demo.js文件的initCy函数中：

.sticky {
   position: fixed !important; //position: sticky !important;
}

我在index.html上创建了一个空的div来保存事件： cy.on('mouseover', 'node', function(event){ var target = event.cyTarget; var sourceName = target.data("name"); console.log(event); console.log(sourceName); var x = event.cyPosition.x; var y = event.cyPosition.y; $("#hovertip").qtip({ content: { text: sourceName, }, show: { delay: 0, event: true, ready: true, }, position: { my: 'bottom center', at: 'top center', target: [x+3, y+3] }, hide: { fixed: true, event: false, inactive: 2000 }, style: { classes: 'qtip-bootstrap .qtip-titlebar', tip: { corner: true, width: 24, // resize the caret height: 24 // resize the caret } } }); });

当我选择它的顶部节点时，它会显示一个qTip，但它的位置很奇怪，并且只在第一个节点上出现。

如果我将鼠标悬停在另一个节点上，它将返回以下错误：
<div id="hovertip"></div>

Answer 1

我设法找到了答案。现在，使用单击节点时出现的“信息”框，现在也可以在将鼠标移到节点上时将其显示出来。可以使用mouseout事件来执行类似的在鼠标移出节点时隐藏信息框的方法，但这太快了。

cy.on('mousemove', 'node', _.debounce( function( event ){
      var target = event.cyTarget;
      var sourceName = target.data("name");
      console.log(event);
      console.log(sourceName);

      if( target.nonempty() ){
        showNodeInfo( target );
      } 
    }, 100) );

使用Cytoscape.js示例使qtip鼠标悬停

1 个答案: