使用 popper 和 tippy 在 Cytoscape 节点标签上创建工具提示

如何解决使用 popper 和 tippy 在 Cytoscape 节点标签上创建工具提示

我正在尝试将 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);

注册 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);
});