javascript - 如何在画布内的fabricjs对象上触发tippyjs工具提示

Question

我正在尝试在 FabricJS 画布上使用 TippyJS 创建一些工具提示，但不断收到我使用的选择器无效的错误。

通常这是我使用 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');
        }
    });
});

但是现在我想在单击画布内的对象时触发工具提示，在这种情况下cirkel1，我尝试了以下操作（在创建 cirkel1 并将其添加到画布之后）：

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

但是当单击圆圈时，我在控制台中收到此错误：

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

这样做的正确方法是什么？

带有完整代码的 Codepen： https ://codepen.io/twan2020/pen/mdOWgaG

标签： javascripttooltipfabricjstippyjs