Create tooltips on Cytoscape Nodes Label using popper and tippy

Question

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.

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

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

Answer 1

Check this https://stackblitz.com/edit/dagre-tippy-wgg8zz

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

You should register popper extension with cytoscape.use(popper);

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

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