我正在使用 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'
});
};
最佳答案
一种使其具有交互性(适用于 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
关于cytoscape.js - Cytoscape-popper 和 Tippy : fails with interactive content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60430166/