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

问题描述

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

I am trying to use cytoscape with tippy but it is not showing any tool tips. It throws an error that ele.popperRef is not a function.

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

Here is the stackblitz link: https://stackblitz.com/edit/dagre-tippy?file=src%2Fapp%2Fapp.component.ts

我添加了所需的所有软件包，其中包括popper.js，tippy.js，但仍然无法正常工作

I have added all the packages required which includes popper.js, tippy.js but still it does not work

推荐答案

选中此 https://stackblitz.com/edit/dagre-tippy-wgg8zz

您不仅仅是简单地正确导入库并注册cytoscape.js扩展名.

You are not simply importing libraries properly and registering the cytoscape.js extensions.

您应该向 cytoscape.use(popper);

您可以将tippy.js与类似的功能一起使用

You can use tippy.js with a function like

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就足够了.

Also, note that you don't have to use tipp.js. Just popper.js is enough actually.

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

您可以在下面应用这些功能并查看工具提示.在此之后，基于事件的显示打开和关闭都很简单.

You can apply these functions below and see the tooltips. The event-based showing on and off is simple after this.

cy.elements().forEach(function(ele) {
  makePopperWithTippy(ele);
  // makePopper(ele);
});

这篇关于使用popper和tippy在Cytoscape节点标签上创建工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！