Create tooltips on Cytoscape Nodes Label using popper and tippy - cytoscape.js

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