Javascript 基于画布坐标的JQuery工具提示

我试着在画布上画一个图，每个顶点都有自己的坐标（在圆心-6px半径-代表它）

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

现在工具提示（仅在使用鼠标在画布上进行第二次移动后）显示右数据，但当我不再在顶点上时，工具提示仍在这里

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

canvas.addEventListener（'mousemove'，函数（evt）{
var mX=evt.clientX；
var mY=evt.clientY；
mX-=canvas.offsetLeft；
mY-=canvas.offsetTop；
$（“画布”）.tooltip（）；
对于（i=0；i当鼠标位于目标元素的任何部分上时，会显示jQueryUI工具提示。这就是工具提示不会褪色的原因，因为鼠标仍在画布元素上

因此，jqueryUI工具提示对于在单个画布图形（如顶点）上显示提示并不是很有用。是的，您可以强制它以API意外的方式显示/隐藏，但这也会带来意外失败的风险

一个简单的替代方案可能是：


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

起始代码示例：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
var rects=[]；
按钮（{x:50，y:50，w:40，h:25，fill:'red'，tip:'I is the red box'）；
推送（{x:50，y:150，w:50，h:75，填充：'blue'，提示：'I am the blue box'}）；
对于（var i=0；i
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 (mX<points[i].x+6 && mX>points[i].x-6) {
                    if (mY<points[i].y+6 && mY>points[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 && ((mX<x1 || mX>x2) && (mY<y1 || mY>y2))) {
                $("canvas").tooltip("option", "disabled", true);
            }*/
        }, false);
    }