https://antv-2018.alipay.com/zh-cn/g6/3.x/demo/tool/tooltip.html

Tooltip 节点和边的提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tooltip 节点和边的提示框</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script>
<style>
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
</style>
<script>
  var data = {
    nodes: [{
      id: '0',
      label: 'node-0',
      x: 100,
      y: 100,
      description: 'This is node-0.',
      subdescription: 'This is subdescription of node-0.'
  }, {
      id: '1',
      label: 'node-1',
      x: 250,
      y: 100,
      description: 'This is node-1.',
      subdescription: 'This is subdescription of node-1.'
  }, {
      id: '2',
      label: 'node-2',
      x: 150,
      y: 350,
      description: 'This is node-2.',
      subdescription: 'This is subdescription of node-2.'
  }, {
      id: '3',
      label: 'node-3',
      x: 420,
      y: 380,
      description: 'This is node-3.',
      subdescription: 'This is subdescription of node-3.'
  }],
    edges: [{
      id: 'e0',
      source: '0',
      target: '1',
      description: 'This is edge from node 0 to node 1.'
  }, {
      id: 'e1',
      source: '0',
      target: '2',
      description: 'This is edge from node 0 to node 2.'
  }, {
      id: 'e2',
      source: '0',
      target: '3',
      description: 'This is edge from node 0 to node 3.'
  }]
  };
  var graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    defaultNode: {
      size: [80, 40],
      shape: 'rect'
    },
    defaultEdge: {
      style: {
        lineAppendWidth: 3
      }
    },
    modes: {
      default: ['drag-node', {
        type: 'tooltip',
        formatText: function formatText(model) {
          var text = 'description: ' + model.description;
          return text;
        },

        shouldUpdate: function shouldUpdate(e) {
          return true;
        }
    }, {
        type: 'edge-tooltip',
        formatText: function formatText(model) {
          var text = 'description: ' + model.description;
          return text;
        },

        shouldUpdate: function shouldUpdate(e) {
          return true;
        }
    }]
    }
  });
  graph.data(data);
  graph.render();
</script></body>
</html>
文档更新时间: 2024-04-05 16:11   作者：admin