使用 JavaScript 显示工具提示答案

【问题标题】：Show tooltip using JavaScript使用 JavaScript 显示工具提示
【发布时间】：2019-10-24 02:14:16
【问题描述】：

我试图通过将鼠标悬停在画布内的圆圈上来显示工具提示。当 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>

【问题讨论】：

标签： javascript html css canvas mousemove

【解决方案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>

【讨论】：

非常感谢:)。它正在工作，但我不得不使用“位置：绝对；”使用“.tooltip”而不是“relative”，就像你做的那样。

【解决方案2】：

有两个问题：

您将样式应用于画布的方式导致其显示与其包含的项目位置的内部跟踪不匹配，因此当光标位于圆圈出现了。
A canvas cannot render and display contents。

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

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>

【讨论】：

谢谢。这适用于一个小画布，但是当我有一个像我的窗口这样的大画布时，由于 CSS，它会显示在外面。正如你所说，我必须更改 CSS。
@Nihar - 非常好 - 很高兴这对您有所帮助。

【解决方案3】：

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

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">

【讨论】：