Tippyjs: Using Tippy.js v5.1.2, I am not able to call the tippy() fn with cytoscape.js to create a tooltip

[RickBogard]

I get an error about a plain object being passed, but I get the error with a plain object and a ref object.

validation.ts:61 Uncaught Error: tippy() was passed a plain object which is no longer supported as an
argument.

See https://atomiks.github.io/tippyjs/misc/#custom-position
at throwErrorWhen (validation.ts:61)
at validateTargets (validation.ts:81)
at tippy (index.ts:28)
at makePopper (pen.js:44)
at pen.js:63
at fa.forEach (cytoscape.min.js:23)
at $a. (pen.js:62)
at o (cytoscape.min.js:23)
at cytoscape.min.js:23
at Ai (cytoscape.min.js:23)

This is the code I'm calling where ele is a cytoscape.js element.
I'm also not sure what to pass for the clientWidth, clientHeight, or getBoundingRectClient(). The docs on this are not clear to me. I have a codePen located herer:
Tippy v5
function makePopper(ele) {
let ref = ele.popperRef();
tippy(ele, {
// popperInstance will be available onCreate
lazy: false,
onCreate(instance) {
instance.popperInstance.reference = {
clientWidth: 10,
clientHeight: 10,
getBoundingClientRect() {
return {
w: 20, h:20
};
},
};
},
});
}

[atomiks]

You want something like this:

    let ref = ele.popperRef();
    // Pass a placeholder element that doesn't do anything
    ele.tippy = tippy(document.createElement('div'), {
      // popperInstance will be available onCreate
      lazy: false,
      hideOnClick: false,
      onCreate(instance) {
        instance.popperInstance.reference = ref;
      },
    });

[ribosradagast]

The posted code gives this error:

Uncaught TypeError: Cannot read property 'show' of undefined
    at Oe.<anonymous> (pen.js:61)
    at o (cytoscape.min.js:23)
    at cytoscape.min.js:23
    at Ai (cytoscape.min.js:23)
    at Ni.zi.emit.zi.trigger (cytoscape.min.js:23)
    at Oe.emit (cytoscape.min.js:23)
    at n (cytoscape.min.js:23)
    at cytoscape.min.js:23

That minified "anonymous" function at the beginning is this:
mount (tippy.chunk.esm.js:1470)
at Object.show(tippy.chunk.esm.js:1694)

[atomiks]

https://codepen.io/atomiks/pen/WNbpEwx?editors=1010

You need to set it onShow, looks like setting it onCreate doesn't successfully set it 🤔

drag event lets you update the popperInstance

[RickBogard]

I have altered the code as suggested, with some minor modifications. The Tippy is showing above the node the first time I hover over the Node, but the next time it appears at the far left of the screen. It seems to lose the position it had when it was first shown after it is hidden on mouseout. How can I make the Tippy retain its position over the node and in fact track with the node when the node is dragged around the screen.

function makePopper(ele) { let ref = ele.popperRef(); ele.tippy = tippy(document.createElement('div'), { // popperInstance will be available onCreate lazy: false, hideOnClick: false, onCreate(instance) { instance.popperInstance.reference = ref }, }); ele.tippy.setContent('Node ' + ele.id()); }

[atomiks]

Look at the CodePen - it does that. But onCreate should still work, I'll have to take a look to see what's causing that bug.

[RickBogard]

Ok, thank you, I just saw your post about the same time as mine. Yes, I see that the on show is working and the tippy tracks the node with the drag event. One additional issue I see is the edge tippy is shown when hovering over the edge, but does not track the movement when dragged.

[atomiks]

Yeah I'm guessing the edge doesn't fire a drag event. You'll have to look through their docs to see what the event is for moving the edge and use that to update the instance as well.

[atomiks]

Also sticky: true should be able to work which prevents the need to manually call .update(), but it uses the "placeholder element" not the popper ref object, so it doesn't work. I'll have to fix that one as well.

[RickBogard]

Ok, thank you for the responses.

[RickBogard]

Will you create bugs for the onCreate and sticky: true issues? Or should I do that? I am interested in following the solution.

[atomiks]

I've pushed fixes for them already :-)

I am working on something else currently. I want to batch these changes into 5.2.0

[atomiks]

5.1.3