基于canvas坐标的JQuery工具提示

我试图在canvas上绘制一个图形，每个顶点都有自己的坐标（在圆心 – 6px半径 – 代表它）。

我想用鼠标在顶点上显示工具提示…当我不在顶点时隐藏此工具提示。

现在工具提示显示（仅在带有鼠标的canvas上的第二次传递之后）具有正确的数据，但是当我不再处于顶点时，工具提示仍然在这里。

这是canvas.addEventListener的代码（这里只是工具提示）

canvas.addEventListener('mousemove', function(evt) { var mX = evt.clientX; var mY = evt.clientY; mX -= canvas.offsetLeft; mY -= canvas.offsetTop; $("canvas").tooltip(); for (i=0; i<points.length; i++) { if (mXpoints[i].x-6) { if (mYpoints[i].y-6) { var str = getNodeRelations(evt); x1 = points[i].x-6; x2 = points[i].x+6; y1 = points[i].y-6; y2 = points[i].y+6; /*if ($("canvas").tooltip("instance") != undefined && $("canvas").tooltip("option", "disabled") == true) { $("canvas").tooltip("option", "disabled", false); }*/ $("canvas").tooltip({ content: str, effect: "fade", track: true }); } } } /*if ($("canvas").tooltip("instance") != undefined && ((mXx2) && (mYy2))) { $("canvas").tooltip("option", "disabled", true); }*/ }, false); } 

在注释块中不是有效的代码行

提前谢谢你的帮助！

Answer 1

当鼠标位于目标元素的任何部分上时，将显示jQueryUI工具提示。 这就是为什么工具提示不会褪色 – 因为鼠标仍然在你的canvas元素上。

因此，jqueryUI Tooltip对于显示各个canvas图形（如顶点）的提示并不是很有用。 是的，您可以强制它以其API无意的方式显示/隐藏，但这也可能导致意外故障。

一个简单的选择可能是：

• 显示/隐藏包含提示文本的div元素。
• 使用CSS定位tip-div。
• 在mousemove中测试每个顶点以显示/隐藏tip-div。

起始代码示例：

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; function reOffset(){ var BB=canvas.getBoundingClientRect(); offsetX=BB.left; offsetY=BB.top; } var offsetX,offsetY; reOffset(); window.onscroll=function(e){ reOffset(); } window.onresize=function(e){ reOffset(); } var rects=[]; rects.push({x:50,y:50,w:40,h:25,fill:'red',tip:'I am the red box'}); rects.push({x:50,y:150,w:50,h:75,fill:'blue',tip:'I am the blue box'}); for(var i=0;i 

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; } #tip{position:absolute;background:white;border:1px solid blue;} 

  
Hover over rectangle to show tooltip.
  
Tooltip