How to trigger tippyjs tooltip on a fabricjs object inside canvas

Question

I am trying to create some tooltips with TippyJS on a FabricJS canvas but keep getting the error that the selectors I use are not valid.

Normally this is how I trigger a tooltip with Tippy:

$( ".hoverimagetip" ).each(function( i ) {
    tippy(this, {
        theme: 'blue',
        trigger: 'mouseenter',
        allowHTML: true,
        followCursor: 'initial',
        animation: 'scale-subtle',
        interactive: true,
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        }
    });
});

But now I want to trigger the tooltip when clicking an object inside the canvas, in this case cirkel1 so I tried the following (after creating cirkel1 and adding it to the canvas):

cirkel1.on('mousedown', ()=>{
  tippy(this, {
        theme: 'blue',
        trigger: 'mouseenter',
        allowHTML: true,
        followCursor: 'initial',
        animation: 'scale-subtle',
        interactive: true,
        content: function (reference) {
            return reference.querySelector('.tooltipcontent');
        }
    });
});

But when clicking the circle I get this error in my console:

tippy.js@6:1 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#<fabric.Circle>' is not a valid selector.

What is the correct way to do this?

Codepen with entire code: https://codepen.io/twan2020/pen/mdOWgaG

TippyJS tooltips can only be attached to DOM objects. You'll need to first attach a DOM element to your Fabric object, then assign the tooltip to that (see here an example http://fabricjs.com/interaction-with-objects-outside-canvas) — melchiar, Feb 16 '21 at 20:55

How to trigger tippyjs tooltip on a fabricjs object inside canvas

0 Answers0