javascriptjqueryfabricjsjquery-tooltip

How to add a text box popup (Jquery tooltip or similar) to a Fabric JS image within a canvas?


I'm working on a Fabric JS project to map a floor with its rooms' locations.
At each room location I added an icon. I want to have a text box pop up (such as jquery tooltip) each time the mouse hover above the icon.
The text box should show room information (phone number \ person \ size \ etc.) I found this google group post, but no one really described the solution beside sharing this link


Solution

  • Step 1: Set up your watchers

    Step 2: Load the dialog

    Step 3: Figure out where the bounding rect is on the page and move the dialog.

    canvas.observe('mouse:over', function (e) {
        console.log("Everyday I'm hovering");
        showImageTools(e.target);
    });
    canvas.observe('mouse:out', function (e) {
        $('#imageDialog').remove();
    });
    function showImageTools (e) {
        var url = 'dialog/imageDialog.htm';
        $.get(url, function(data) {
        // Don't add it twice
        if (!$('#imageDialog').length) {
            $(body).append(data);
        }
        moveImageTools();
    });
    
    function moveImageTools () {
        var w = $('#imageDialog').width();
        var h = $('#imageDialog').height();
        var e = canvas.getActiveObject();
        var coords = getObjPosition(e);
        // -1 because we want to be inside the selection body
        var top = coords.bottom - h - 1;
        var left = coords.right - w - 1;
        $('#imageDialog').show();
        $('#imageDialog').css({top: top, left: left});
    }
    function getObjPosition (e) {
        // Get dimensions of object
        var rect = e.getBoundingRect();
        // We have the bounding box for rect... Now to get the canvas position
        var offset = canvas.calcOffset();
        // Do the math - offset is from $(body)
        var bottom = offset._offset.top + rect.top + rect.height;
        var right = offset._offset.left + rect.left + rect.width;
        var left = offset._offset.left + rect.left;
        var top = offset._offset.top + rect.top;
        return {left: left, top: top, right: right, bottom: bottom};
    }
    

    That should be enough to get you started. Let me know if any of this doesn't make sense.