我想按事件显示 HTML 元素

Question

I'm trying to make a tooltip by clicking a shape. I've done with adding event listener to canvas shape. However, I could not add tooltip such as HTML element.

I tried to implement tooltip by using css display:none, block

var toolTip = document.createElement('div');
toolTip.style.width = "50px";
toolTip.style.height = "auto";
toolTip.style.padding = "5px";
toolTip.style.border = "1px solid rgb(177, 177, 177)";
toolTip.style.position = "absolute";
toolTip.style.display = "none";
toolTip.style.display = "background: rgba(111,231,43,0.5)";
toolTip.style.zIndex = "10";

canvas.addEventListener("click", e => {
      let rect = canvas.getBoundingClientRect();
      this.mousePos = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      };
      console.log(this.mousePos.x, this.mousePos.y);

      if(0 <= this.mousePos.x <300 && 100 <= this.mousePos.y <110) {
        console.log("mouseClicked");
        toolTip.style.display = "block";
        toolTip.style.left = this.mousePos.x + this.mousePos.x * 0.02;
        toolTip.style.top = this.mousePos.y + this.mousePos.y * 0.02;
        toolTip.innerHTML = "<p> hello </p>";
      }
});

https://codepen.io/chikichaka/pen/NWRjWyG

Answer 1

You create a div element to act as a tooltip but you never append the tooltip to a container. You must append the div to a container, such as the body

document.body.appendChild(toolTip);