Cytoscape.js网络图显示tooltip

官网链接: Cytoscape.js

需求：实现鼠标划上网络图节点时显示相关的信息
实现效果如下图：

实现方式如下：
1.安装包 qtip2

npm i qtip2

2.引入

//这是绘制网络图的相关环境（根据需要引入）
import cytoscape from 'cytoscape'
import panzoom from 'cytoscape-panzoom'
import "cytoscape-panzoom/cytoscape.js-panzoom.css"
import cola from 'cytoscape-cola';
//这里是关于qtip2包的相关的
import 'qtip2/dist/jquery.qtip.min.css';
import 'qtip2';
import cytoscapeQtip from 'cytoscape-qtip';
cytoscape
    .use(cola)
    .use(cytoscapeQtip);
panzoom(cytoscape)

3.直接用

// 使用 cytoscape-qtip 添加 tooltips
cy.nodes().forEach(ele => {
  ele.qtip({
    content: {
      text: `ID: ${ele.data('id')}<br>Label: ${ele.data('label')}`
    },
    position: {
      my: 'top center',
      at: 'bottom center'
    },
    show: {
      event: 'mouseover', // 鼠标悬停时显示
      solo: true // 只能显示一个
    },
    hide: {
      event: 'mouseout' // 鼠标移出时隐藏
    },
    style: {
      classes: 'qtip-bootstrap',
      tip: {
        width: 16,
        height: 8
      }
    }
  });
});