Javascript 在画布中绘制的矩形区域的弹出工具提示

我在HTML5中使用JavaScript填充了一个矩形区域，我需要添加一个工具提示弹出窗口，当用户在手持设备中触摸/单击该区域或在浏览器中将鼠标悬停在该区域上时显示文本。我已经看过StackOverflow上的示例，但是没有一个能够解决这个特定的情况，其中包含悬停点的区域是使用JavaScript绘制的

---

感谢您的帮助。

制作一个简单的工具提示类/对象，用于处理状态、位置等

例子

• 这将创建该类的一个实例
• 当鼠标悬停或单击该框时，它将显示
• 超时后，它将隐藏工具提示

未实现的一个注意事项是：如果显示第二个实例，则不会隐藏前一个实例。创建一个公共方法，当其他实例发生超时时，该方法将清除超时并将其隐藏（将它们存储在数组中，然后迭代以调用隐藏方法）

无论如何，这应该是一个坚实的基础，以任何你喜欢的方式建立

var canvas=document.querySelector（“canvas”），
ctx=canvas.getContext（“2d”），
区域={x:50，y:50，w:100，h:100}；
ctx.fillStyle=“#79f”；
fillRect（region.x，region.y，region.w，region.h）；
//创建工具提示实例：
var t1=新工具提示（画布，区域，“这是工具提示”，1503000）；
//工具提示实例：
功能工具提示（画布、区域、文本、宽度、超时）{
var me=this，//事件处理程序的自引用
div=document.createElement（“div”），//工具提示div
parent=canvas.parentNode，//画布的父节点
visible=false；//当前状态
//设置一些初始样式，可以用类名等替换。
div.style.cssText=“位置：固定；填充：7px；背景：金色；指针事件：无；宽度：“+width+”px”；
div.innerHTML=文本；
//显示工具提示
this.show=功能（pos）{
如果（！visible）{//如果已显示则忽略（或重置时间）
visible=true；//锁定，因此只显示一次
setDivPos（pos）；//设置位置
parent.appendChild（div）；//添加到画布的父级
setTimeout（隐藏，超时）；//隐藏超时
}
}
//隐藏工具提示
函数hide（）{
visible=false；//超时后隐藏它
parent.removeChild（div）；//从DOM中删除
}
//检查鼠标位置，根据需要添加限制…例如：
功能检查（e）{
var pos=getPos（e），
posAbs={x:e.clientX，y:e.clientY}；//div是固定的，所以使用clientX/y
如果（！可见&&
pos.x>=region.x&&pos.x=region.y&&pos.y

canvas{边框：1px纯蓝色；背景：#eee}