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

Question

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

score 8 · Accepted Answer · answered Jan 20 '15 at 16:20

8

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.

answered Jan 20 '15 at 16:20

Jason Maggard

1,632
1
16
21

Thank you for the time and effort! I will def. give it a try once I'm done with my current work. Will keep you posted. Zack – Zack S Jan 20 '15 at 21:43
I was trying to work with this code for a while and eventually decided to implement an easier sulotion based on the demo code here: http://fabricjs.com/events/ . Instead of using the tooltip, I used the on mouse over event to update a div underneath the canvas with the required information. This solution is not as fancy as the tooltip one, but it just works for me. – Zack S Jan 28 '15 at 17:22
1

Glad you got something working Zack. This code is actually used to chase text and images with a tool palette, similar to working with text or graphics in MSOffice. Let me know if there's anything I can do to make the code a bit more understandable. You can see the text tools in this Screenshot: http://shineemc.com/samples/shine.png – Jason Maggard Jan 28 '15 at 21:51
It would be great if this code can be uploaded to JSFIDDLE, that way whoever is interested can follow it easily. I tried, and got stuck with the Jquery get (since the source is external). `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access` you can see my trial here: http://jsfiddle.net/hXzvk/81/ – Zack S Jan 29 '15 at 14:58
1

http://jsfiddle.net/hXzvk/83/ Here's an updated version of your fiddle. The CORS problem is trying to AJAX the dialog. I took that out. – Jason Maggard Jan 29 '15 at 17:06
That looks awesome! Thank you so much! I added name field for each shape and now they report their serial when hovering. http://jsfiddle.net/hXzvk/87/ I hope others will find that usefull one day too :) Thanks again @Jason Maggard – Zack S Jan 29 '15 at 21:33
What if the fabric element is inside of a group – Mauro Aguilar Apr 19 '17 at 20:14
The fiddle doesn't work with the current "master" branch of fabricjs; which version were you using for the fiddle (if you can remember)? – Tieson T. Sep 20 '17 at 20:28
1

Fabric 1.5.2 was the current version when I wrote the fiddle. Thank goodness for source control, eh? – Jason Maggard Sep 27 '17 at 13:04
Hello, i am trying to run the source code provided in jsfiddle.net/hXzvk/87 , however i am not able to see the popup box on the canvas, am i missing something ? – Kenzo Sep 16 '19 at 14:18

score 2 · Answer 2 · answered Aug 11 '20 at 09:16

Add span element below the canvas

<span ref="toolTip" class="toolTip">ToolTip</span>

Add style for span element NB: Visibility is hidden by default

.toolTip{
  position: absolute;
  z-index: 1;
  background: rgb(119, 128, 0);
  height: 30px;
  width: 120px;
  padding: 8px;
  font-size: 13px;
  color: #fff;
  visibility: hidden;
}

Add mouse over and mouse out events

 this.$data.canvas.on('mouse:over', function (e) {
        // console.log(e.e.offsetX)
        if (e.target && e.target.feature === 'Seat') {
          self.$refs.toolTip.innerHTML =
            'Seat: ' + e.target.label + '  Row: ' + e.target.rowLabel
          self.$refs.toolTip.style.visibility = 'visible'
          self.$refs.toolTip.style.top = e.e.offsetY + 'px'
          self.$refs.toolTip.style.left = e.e.offsetX + 'px'
        }
      })
      this.$data.canvas.on('mouse:out', function (e) {
        self.$refs.toolTip.style.visibility = 'hidden'
      })

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

2 Answers2

Linked