2

我正在尝试在 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

4

0 回答 0