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

Question

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

这是 stackblitz link：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);
});

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

Create tooltips on Cytoscape Nodes Label using popper and tippy

cytoscape.js

cytoscape

popper.js

tippyjs