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

编程问答 2022-05-25

问题描述

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fabricjsjavascripttippyjstooltiptooltiptooltip