cytoscape.js - Cytoscape-popper 和 Tippy : fails with interactive content

Question

我正在使用 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'
  });
};

Answer 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