Javascript 动态添加工具提示以在HTML画布上移动形状

在这里，我正在HTML画布中绘制形状，并通过设置setInterval函数来移动它们。但我需要为每个形状动态添加工具提示。找不到确切的答案。请帮忙。请查看我的

函数形状（x、y、w、颜色、形状）
{
这个.x=x；
这个。y=y；
这个.w=w；
这个颜色=颜色；
this.anim=函数（）
{
if（this.x对于（var i=0；这可能会有帮助：同上，@K3N的工具提示答案是一个很好的开始。工具提示往往会浮动到画布区域之外，使用单独的div元素可以使工具提示浮动。@K3N:我已经从您的答案中集成了工具提示代码，但是工具提示不会显示在确切的位置，并且当形状移动时，工具提示会显示出来我的@K3N-请帮忙。请查看我更新的小提琴
function Shapes(x, y, w, color, shape) 
{
    this.x = x;
    this.y = y;
    this.w = w;
    this.color = color;

    this.anim = function() 
    {
        if (this.x < context.canvas.width) {
            if(shape=="square"){
            this.x += 5;
            context.fillStyle = this.color;
            context.strokeStyle = "red";
            context.lineWidth = 3;
            context.fillRect(this.x,this.y,this.w,this.w);
            context.strokeRect(this.x,this.y,this.w,this.w);
            }else if(shape=="triangle"){

                        this.x += 1;
                        context.beginPath();
                        context.moveTo(this.x, this.x-20);
                    context.lineTo(this.x+60, this.x);
                    context.lineTo(this.x+25, this.x+50);
                        context.closePath();
                        context.fillStyle = "blue";
                        context.fill();
                    }else if(shape=="circle"){
                            this.x += 1;
                            context.beginPath();
                            context.arc(this.x, this.y, 25, 0, 2 * Math.PI, false);
                            context.fillStyle = "green";
                            context.fill();
                            context.strokeStyle = '#003300';
                            context.stroke();
                    }
            if(shape=="rectangle"){
                            this.x += 1;
                    context.fillStyle = "#ff6600";
                    context.strokeStyle = "blue";
                    context.lineWidth = 3;
                    context.fillRect(this.x,this.y,this.w+30,this.w);
                    context.strokeRect(this.x,this.y,this.w+30,this.w);
            }
        }
        else this.x=-this.w;
    }
}

function init() {
    canvas = document.getElementById('testCanvas');
    context = canvas.getContext("2d");
    var max=200, min=0;

    var shapes =["square", "circle", "triangle", "rectangle"]

    var objects =[];

    for(var i=0;i<shapes.length;i++){
            var rectY = Math.floor(Math.random()*(max-min+1)+min);
            var rect1 = new Shapes(0, rectY, 40, "blue", shapes[i]);
            //var rect2 = new Shapes(0, 100, 40, "blue");
            objects.push(rect1);
        }

    setInterval(function(){
        blank();
        for(rect in objects){
            objects[rect].anim();
        }
    }, 30);
}

function blank() {
    context.fillStyle = "#ebebe0";
    context.fillRect(0,0,context.canvas.width, context.canvas.height);
}


init()