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

Question

我正在尝试将 cytoscape 与tippy 一起使用，但它没有显示任何工具提示。它会抛出 ele.popperRef 不是函数的错误。

这里是 stackblitz 链接：https://stackblitz.com/edit/dagre-tippy?file=src%2Fapp%2Fapp.component.ts

我已经添加了所有需要的包，包括popper.js，tippy.js，但它仍然不起作用

Answer 1

查看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);
});