问题描述
我正在尝试将 cytoscape 与 tippy 一起使用,但它没有显示任何工具提示。它抛出一个错误,即 ele.popperRef 不是一个函数。
这是 stackblitz 链接:https://stackblitz.com/edit/dagre-tippy?file=src%2Fapp%2Fapp.component.ts
我已经添加了所有需要的包,其中包括 popper.js、tippy.js 但它仍然不起作用
解决方法
检查这个https://stackblitz.com/edit/dagre-tippy-wgg8zz
您不仅仅是正确导入库并注册 cytoscape.js 扩展。
您应该使用 cytoscape.use(popper);
您可以使用带有类似功能的tippy.js
function makePopperWithTippy(node) {
let ref = node.popperRef(); // used only for positioning
// A dummy element must be passed as tippy only accepts dom element(s) as the target
// https://atomiks.github.io/tippyjs/v6/constructor/#target-types
let dummyDomEle = document.createElement("div");
let tip = tippy(dummyDomEle,{
// tippy props:
getReferenceClientRect: ref.getBoundingClientRect,// https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect
trigger: "manual",// mandatory,we cause the tippy to show programmatically.
// your own custom props
// content prop can be used when the target is a single element https://atomiks.github.io/tippyjs/v6/constructor/#prop
content: () => {
let content = document.createElement("div");
content.innerHTML = "Tippy content";
return content;
}
});
tip.show();
}
另外,请注意,您不必使用tipp.js。其实只要 popper.js 就够了。
function makePopper(ele) {
// create a basic popper on the first node
let popper1 = ele.popper({
content: () => {
let div = document.createElement("div");
div.innerHTML = "Popper content";
document.body.appendChild(div);
return div;
},popper: {} // my popper options here
});
}
您可以在下方应用这些功能并查看工具提示。此后基于事件的显示打开和关闭就很简单了。
cy.elements().forEach(function(ele) {
makePopperWithTippy(ele);
// makePopper(ele);
});