2

i develop a web app on angularjs with fabricjs and i use the bootstrap popover to show custom messages when the user is over a canvas object (table with chairs object), and hide it when the mouse is out of an object(table).

the problem is that, the popover is not showing each time the mouse goes over an object, if i move the mouse fast from one object to another, then no popover is shown , i have to move the mouse very slow from one object to another in order for the popover to show.

enter image description here below is show the main snippet where i create and show the popover :

/on the mouse:over event i create and show the popover message/

 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
                }


            });

        }

    });

/*i destroy the popover */

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

any help will be appreciated.

Theo Itzaris
  • 4,321
  • 3
  • 37
  • 68
  • why have you declared `$('canvas')` in some sections but not on the destroy. Where is `canvas` declared as a variable? –  Oct 21 '15 at 08:27
  • hello, on mouse:out event, i destroy the popover which is on $('canvas'), the canvas variable is declared on another js file, but it works ok, as you can see on the screenshot ,that objects are drawn over the canvas object class – Theo Itzaris Oct 21 '15 at 08:30
  • why are you using `.on('mouse:over'` I am not saying its wrong i have just never seen it like that, is it not just `.on('mouseover'` and `.on('mouseout` –  Oct 21 '15 at 08:41
  • If you using hovering to activate it would it not be easier to implement a tooltip and then just style it like you have in the above example? –  Oct 21 '15 at 08:44
  • the canvas.on('mouse:out' and canvas.on('mouse:over' events are fabric's events. i use that event listeners because the tables are fabricjs objects and not DOM elements. – Theo Itzaris Oct 21 '15 at 09:17

0 Answers0