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 toolt

Answer 1

Add span element below the canvas

ToolTip

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