我正在使用cytoscape来显示生物学文献中的连接，并希望在单击边缘时显示引用。
我遵循Tippy与cytoscape popper结合使用的说明https://github.com/cytoscape/cytoscape.js-popper/blob/master/demo-tippy.html.它运行良好，除了在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(是将行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
我无法用我的标准tippy片段重现您的错误。看看这个代码片段。使用以下代码，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>