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

Question

我正在尝试使用 cytoscape.js

中的 Wine & Cheese 示例制作一个 qtip，当您将鼠标悬停在节点名称上时会显示该节点名称

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

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

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

我在 index.html 上创建了一个空的 div 来举办活动： <div id="hovertip"></div>

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

如果我将鼠标悬停在不同的节点上，它会 returns 出现以下错误：
Uncaught TypeError: Cannot set property 'event' of null

Answer 1

我设法找到了答案。使用单击节点时出现的 "info" 框，现在当您将鼠标移到节点上时也会出现。鼠标移出节点时隐藏信息框的类似方法可以使用 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 鼠标悬停

Make qtip mouseover with a Cytoscape.js example

javascript

cytoscape.js

qtip2