如何将文本框弹出窗口（Jquery 工具提示或类似的）添加到画布中的 Fabric JS 图像？

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

Answer 1

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.

Answer 2

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'
      })