Angularjs 带有自定义模板的引导弹出框不会每次都显示

我使用fabricjs在angularjs上开发了一个web应用程序，当用户在画布对象（带椅子的桌子对象）上方时，我使用引导弹出窗口显示自定义消息，当鼠标在对象（桌子）上方时，我将其隐藏

问题是，popover并不是每次鼠标经过一个对象时都显示，如果我将鼠标从一个对象快速移动到另一个对象，则不会显示popover，我必须将鼠标从一个对象缓慢移动到另一个对象才能显示popover

下面是我创建并显示popover的主要代码段：

/在鼠标上：我创建并显示popover消息的over事件/

---

如果有任何帮助，我们将不胜感激。

为什么您在某些部分声明了

$（'canvas'）

，而不是在屏幕上。

canvas

在哪里声明为变量？您好，在mouse:out事件中，我销毁了$（'canvas'）上的popover，canvas变量在另一个js文件中声明，但它工作正常，正如您在屏幕截图上看到的，对象绘制在canvas对象类上为什么使用

（'mouse:over'

我不是说它错了，我只是从来没有见过它这样，不是吗？'mouseover'和

。on（'mouseout

如果你使用悬停来激活它，那么实现一个工具提示，然后像上面的例子那样对它进行样式设置会不会更容易？canvas.on（'mouse:out'和canvas.on（'mouse:over'事件是fabric的事件。我使用该事件侦听器，因为表是fabricjs对象，而不是DOM元素。

 canvas.on('mouse:over', function (e) {
            console.log("mouse over object");

        var table = e.target;
        $scope.tablePosition.top = table.top;
        $scope.tablePosition.left = table.left;
        $scope.tablePosition.width = table.width;
        $scope.tablePosition.height = table.height;

        var activeTab = $('.nav-tabs').find('li[class=active]').children().attr('id');

        if ((table.typeTable != 'theatre') && (activeTab == 'tab2')) {
            console.log(table.typeTable + ":" + activeTab);
            var last = table.getObjects().length;
            var name = table._objects[last - 1]._objects[1].text;
            var num = table._objects[last - 1]._objects[0].text;
            var title = '';

            $('canvas').popover({
                content: content(table, $scope.participants),
                template: popoverTemplate,
                placement: 'top',
                title: title = name != '' ? name : 'Table ' + num,
                html: true
            });

            $('canvas').popover('show');

            $('canvas').on('shown.bs.popover', function () {

                console.log('before popover show');
                if ($scope.tablePosition.left < 200) {
                    $('.popTableInfo').css('left', ($scope.tablePosition.left + ($scope.tablePosition.width / 2) + 280) + 'px');//right of the table
                }
                else {
                    $('.popTableInfo').css('left', ($scope.tablePosition.left - ($scope.tablePosition.width / 2)) + 'px');//left of the table
                }

                if ((canvas.height - $scope.tablePosition.top) < 100) {
                    $('.popTableInfo').css('top', (canvas.height - $('.popover.popTableInfo').height() / 2) + 'px'); //above table
                }
                else {
                    $('.popTableInfo').css('top', ($scope.tablePosition.top + 100) + 'px'); //normal
                }


            });

        }

    });

canvas.on('mouse:out', function (e) {
        $('canvas').popover('destroy');
    });