我正在寻找一个示例，将鼠标悬停在Cytoscape图中的节点上时显示工具提示。 我已经看到了一些使用popperjs和qtip的示例，但它们都没有起作用（至少对我而言）
cytoscape-qtip似乎已被弃用
此处为示例（Tippy.js）
https://github.com/cytoscape/cytoscape.js-popper
似乎不起作用
lluozzi 回答：Cytoscape JS和Angular8的工具提示
您可以使用here中的代码，我自己做了一些调整，以便工具提示出现在悬停上：
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"
}
}));
function makePopper(ele) {
let ref = ele.popperRef(); // used only for positioning
ele.tippy = tippy(ref,{
// tippy options:
content: () => {
let content = document.createElement("div");
content.innerHTML = ele.id();
return content;
},trigger: "manual" // probably want manual mode
});
}
cy.ready(function() {
cy.elements().forEach(function(ele) {
makePopper(ele);
});
});
cy.elements().unbind("mouseover");
cy.elements().bind("mouseover",event => event.target.tippy.show());
cy.elements().unbind("mouseout");
cy.elements().bind("mouseout",event => event.target.tippy.hide());
});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;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}<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>