I have it set up in this codepen:I have two questions related to this solution using Tippy v4. related stackoverflow question
JS:
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "a"
}
}, {
data: {
id: "b"
}
}],
edges: [{
data: {
id: "ab",
source: "a",
target: "b"
}
}]
},
layout: {
name: "grid"
}
}));
function makePopper(ele) {
let ref = ele.popperRef();
tippy(ref, {
// popperInstance will be available onCreate
lazy: false,
onCreate(instance) {
instance.popperInstance.reference = {
clientWidth: 10,
clientHeight: 10,
getBoundingClientRect() {
return {
w: 20, h:20
};
},
};
},
});
}
cy.ready(function() {
cy.elements().forEach(function(ele) {
makePopper(ele);
});
});
cy.elements().unbind('mouseover');
cy.elements().bind('mouseover', (event) => event.target.tippy.show());
cy.elements().unbind('mouseout');
cy.elements().bind('mouseout', (event) => event.target.tippy.hide());
});
HTML:
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/popper.js@1.14.7/dist/umd/popper.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-popper@1.0.5/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js">
</script>
<link rel="stylesheet"
href="https://unpkg.com/tippy.js@5/dist/backdrop.css">
</head>
<body>
<div id="cy"></div>
</body>
CSS:
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
1) Is it possible to make the Tippy follow the node as it is dragged? I have tried adding the property like this in cy.ready(), tippy.setDefaultProps({followCursor: 'true'}); But I get an error that the tippy.setDefaultProps() is not a function. I have set this Tippy v4 question up in this codepen: setDefaultProps codePen
tippy.setDefaultProps({followCursor: 'true'});
2) I cannot get the tippy example to work with Tippy v5. I get an error, tippy was passed as a plain object which is no longer supported. I have tried passing a ref object, but I get the same error. I have it v5 set up in this codepen: Tippy v5 error The code shown above is the Tippy v5 code, but the Tippy v4 code is very similar.
