3

我正在使用 cytoscape 显示生物学文献中的连接，并希望在单击边缘时显示参考。

我正在按照https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html上将 Tippy 与 cytoscape-popper 结合使用的说明进行操作。它工作正常，除了在 Tippy 文本中创建 href 链接时，我希望能够将其用于点击。

我尝试通过在下面的代码中合并“interactive：true”来做到这一点，但这样做会产生控制台错误TypeError: t is null

var makeTippy = function(el, text){
  var ref = el.popperRef();
  var dummyDomEle = document.createElement('div');
  var tip = tippy(dummyDomEle, {
    onCreate: function(instance){ // mandatory
      instance.popperInstance.reference = ref;
    },
    lazy: false,
    trigger: 'manual',
    content: function(){
      var div = document.createElement('div');
      div.innerHTML = text;
      return div;
    },
    // own preferences:
    arrow: true,
    placement: 'bottom',
    hideOnClick: true,
    multiple: true,
    //interactive: true,  <-- uncommenting this line generates error
    sticky: true,
    theme: 'run'
  });
};
4

2 回答 2

1

使其具有交互性的一种方法（适用于tippy v5.2.1）是将行添加appendTo: document.body到tippy 选项中。

例如，在您的代码中：

var makeTippy = function(el, text){
  var ref = el.popperRef();
  var dummyDomEle = document.createElement('div');
  var tip = tippy(dummyDomEle, {
    onCreate: function(instance){ // mandatory
      instance.popperInstance.reference = ref;
    },
    lazy: false,
    trigger: 'manual',
    content: function(){
      var div = document.createElement('div');
      div.innerHTML = text;
      return div;
    },
    // own preferences:
    arrow: true,
    placement: 'bottom',
    hideOnClick: true,
    multiple: true,
    interactive: true,
    appendTo: document.body, //<-- Add This Line
    sticky: true,
    theme: 'run'
  });
};

演示中的相关行：https ://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html#L123-L124

于 2020-08-05T17:31:08.603 回答
0

我无法用我的标准小费片段重现您的错误。看看这个代码片段。使用以下代码，tippy 没有错误，并且工具提示是交互式的：

document.addEventListener("DOMContentLoaded", function() {
  var cy = (window.cy = cytoscape({
    container: document.getElementById("cy"),
    style: [{
        selector: "node",
        style: {
          content: "data(id)"
        }
      },
      {
        selector: "edge",
        style: {
          "curve-style": "bezier",
          "target-arrow-shape": "triangle"
        }
      }
    ],
    elements: {
      nodes: [{
        data: {
          id: "a"
        }
      }, {
        data: {
          id: "b"
        }
      }],
      edges: [{
        data: {
          id: "ab",
          source: "a",
          target: "b"
        }
      }]
    },
    layout: {
      name: "grid"
    }
  }));

  var a = cy.getElementById("a");
  var b = cy.getElementById("b");
  var ab = cy.getElementById("ab");

  var makeTippy = function(node, text) {
    var ref = node.popperRef();
    var tip = tippy(ref, {
      content: function() {
        // function can be better for performance
        var div = document.createElement("div");

        div.innerHTML = text;

        return div;
      },

      // your own preferences:
      arrow: true,
      placement: "bottom",
      hideOnClick: false,
      multiple: true,
      sticky: true,
      interactive: true
    });

    return tip;
  };

  var tippyA = makeTippy(a, "foo");

  tippyA.show();

  var tippyB = makeTippy(b, "bar");

  tippyB.show();

  var tippyAB = makeTippy(ab, "baz");

  tippyAB.show();
});
body {
  font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
  font-size: 14px
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}


/* makes sticky faster; disable if you want animated tippies */

.tippy-popper {
  transition: none !important;
}
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.4/cytoscape-popper.min.js"></script>
  <script src="https://unpkg.com/tippy.js@4.0.1/umd/index.all.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@4.0.1/index.css" />
</head>

<body>
  <div id="cy"></div>
</body>

于 2020-03-02T06:59:54.050 回答