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

【问题标题】：Make qtip mouseover with a Cytoscape.js example使用 Cytoscape.js 示例制作 qtip 鼠标悬停
【发布时间】：2018-07-26 03:07:50
【问题描述】：

我正在尝试使用 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>

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

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

【问题讨论】：

标签： javascript cytoscape.js qtip2

【解决方案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) );

【讨论】：