Question

让我尝试尽可能清楚，尽管这并不容易。好的，我在div里面有一个圆圈，我知道这个div里面的圆圈的x和y坐标。

如何创建JavaScript或HTML工具提示以指向我点击的位置（在本例中为圆圈）？

以下是图片，以便您更好地了解我正在尝试做的事情：

Here is the picture

现在我知道你们中的一些人会想：为什么不使用圆圈的id并让工具提示指向那个方向？好吧，因为圆圈是动态创建的JavaScript对象，不是HTML的一部分。

因为绘图节省了时间：我在哪里可以找到从上面指向的工具提示脚本？像这样的东西，又是另一个：

Screen shot

Answer 1

如果您想知道如何定位工具提示，请使用样式。在样式表中给出父元素的相对位置和子绝对位置：

#canvas {
    position: relative;
}
.tooltip {
    position: absolute;
}

创建工具提示时，请为其提供“工具提示”类，并设置其style.left和style.top属性。尝试类似：

function click(evt) {
   if (! tooltip) {
       tooltip = document.createElement('div'); // or what-have-you
       tooltip.className += ' tooltip';
   ...
   tooltip.style.left = evt.offsetX + 'px';
   tooltip.style.left = evt.offsetY + 'px';

Answer 2

您可以捕捉鼠标位置：http://www.codelifter.com/main/javascript/capturemouseposition1.html

Answer 3

单击鼠标时获取x和y坐标。在指定的x和y坐标处定位工具提示[可能是div]。

要获得坐标，请参阅

event.clientX和event.clientY

来自JavaScript的触发事件

3 个答案: