使用 JavaScript 显示工具提示

Question

我试图通过将鼠标悬停在 canvas 内的圆圈上来显示工具提示。当 CSS 由 javaScript 从隐藏变为可见时（通过 chrome 检查看到），工具提示没有显示。请帮忙解决这个问题。感谢您的帮助。

const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');

const circle2 = new Path2D();
                        circle2.arc(100, 100, 25, 0, 2 * Math.PI);
                        ctx.fillStyle = "red";
                        ctx.fill(circle2);
                        
canvas.addEventListener("mousemove", function(event2) {
                            if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
                                showtext();
                            }
                        }); 
                        
function showtext(){
    document.getElementById("tooltiptext").style.visibility = 'visible';
}

html, body, div, canvas {
        width:  100%;
        height: 100%;
        margin: 0;
}
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black; 
    }
    .tooltip .tooltiptextstyle {
        visibility: hidden; 
        display: block;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" href="style.css"/>
    <script type="text/typescript" src="main.ts"></script>
</head>
<body>
    <div id="design" class="design">
        <canvas id="flower">
            <div class="tooltip">
                <span id ="tooltiptext" class="tooltiptextstyle">blah</span>
            </div>
        </canvas>
    </div>
</body>
</html>

Answer 1

需要将.tooltip元素移出canvas元素，否则不显示。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);

// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
  // Check whether point is inside circle
  if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
    showtext();
  } else {
    hidetext();
  }
});

function showtext() {
  document.getElementById("tooltiptext").style.visibility = 'visible';
}

function hidetext() {
  document.getElementById("tooltiptext").style.visibility = 'hidden';
}

.tooltip {
  visibility: hidden;
  position: absolute;
  top: 20px; left: 20px;
}

body {
  margin: 0;
}

<canvas id="canvas"></canvas>

<div class="tooltip">
  <span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>

Answer 2

有两个问题：

您将样式应用到 canvas 的方式导致其显示与其包含的项目的位置的内部跟踪不匹配，因此 if 条件不一定当光标位于圆出现.
A canvas cannot render and display contents.

因此，下面的代码片段显示了一个有效的版本。您需要弄清楚如何正确定位事物，但这可以解决眼前的问题。

const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');

const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
                        
canvas.addEventListener("mousemove", function(event2) {
  if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
    showtext();
  }
}); 
                        
function showtext(){
    document.getElementById("tooltiptext").style.visibility = 'visible';
}

html, body, div {
  width:  100%;
  height: 100%;
  margin: 0;
}
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; 
}
.tooltip .tooltiptextstyle {
    visibility: hidden; 
    display: block;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" href="style.css"/>
    <script type="text/typescript" src="main.ts"></script>
</head>
<body>
    <div id="design" class="design">
        <canvas id="flower">
        </canvas>
        <div class="tooltip">
          <span id ="tooltiptext" class="tooltiptextstyle">
            blah
          </span>
      </div>
    </div>
</body>
</html>

Answer 3

问题是您将 canvas 的宽度和高度设置为 css 中父级的 100%。您需要改为设置 canvas 的宽度和高度属性。

html, body, div, canvas {
        width:  100%;
        height: 100%;
        margin: 0;
}

html, body, div {
        width:  100%;
        height: 100%;
        margin: 0;
}
<canvas id="canvas" width="200" height="200">

使用 JavaScript 显示工具提示

Show tooltip using JavaScript

html

javascript

css

canvas

mousemove