Popup ToolTip para región rectangular dibujada en canvas

Tengo una región rectangular que estoy rellenando con JavaScript en HTML5, y debo agregar una información emergente sobre información sobre herramientas para mostrar el texto cuando el usuario lo toque o haga clic en una computadora de mano o se desplace sobre ella en un navegador. He mirado los ejemplos que ya están en StackOverflow, pero ninguno de ellos parece abordar esta situación específica, donde el área que contiene el punto de desplazamiento se dibuja con JavaScript.

Cualquier ayuda sería apreciada, gracias.

Haga una clase / objeto de punta de herramienta simple que maneje estados, posición, etc.

Ejemplo

  • Esto creará una instancia de la clase.
  • Cuando se desplace o haga clic en el cuadro, se mostrará
  • Después de un tiempo de espera, ocultará la información sobre herramientas.

Una consideración que no está implementada: si se muestra una segunda instancia, la anterior no se oculta. Cree un método público que borrará el tiempo de espera y lo ocultará cuando esto suceda para las otras instancias (guárdelos en una matriz y repítalo para llamar al método hide).

En cualquier caso, esto debería ser una base sólida sobre la cual construir de la forma que prefiera.

var canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"), region = {x: 50, y: 50, w: 100, h: 100}; ctx.fillStyle = "#79f"; ctx.fillRect(region.x, region.y, region.w, region.h); // create a tool-tip instance: var t1 = new ToolTip(canvas, region, "This is a tool-tip", 150, 3000); // The Tool-Tip instance: function ToolTip(canvas, region, text, width, timeout) { var me = this, // self-reference for event handlers div = document.createElement("div"), // the tool-tip div parent = canvas.parentNode, // parent node for canvas visible = false; // current status // set some initial styles, can be replaced by class-name etc. div.style.cssText = "position:fixed;padding:7px;background:gold;pointer-events:none;width:" + width + "px"; div.innerHTML = text; // show the tool-tip this.show = function(pos) { if (!visible) { // ignore if already shown (or reset time) visible = true; // lock so it's only shown once setDivPos(pos); // set position parent.appendChild(div); // add to parent of canvas setTimeout(hide, timeout); // timeout for hide } } // hide the tool-tip function hide() { visible = false; // hide it after timeout parent.removeChild(div); // remove from DOM } // check mouse position, add limits as wanted... just for example: function check(e) { var pos = getPos(e), posAbs = {x: e.clientX, y: e.clientY}; // div is fixed, so use clientX/Y if (!visible && pos.x >= region.x && pos.x < region.x + region.w && pos.y >= region.y && pos.y < region.y + region.h) { me.show(posAbs); // show tool-tip at this pos } else setDivPos(posAbs); // otherwise, update position } // get mouse position relative to canvas function getPos(e) { var r = canvas.getBoundingClientRect(); return {x: e.clientX - r.left, y: e.clientY - r.top} } // update and adjust div position if needed (anchor to a different corner etc.) function setDivPos(pos) { if (visible){ if (pos.x < 0) pos.x = 0; if (pos.y < 0) pos.y = 0; // other bound checks here div.style.left = pos.x + "px"; div.style.top = pos.y + "px"; } } // we need to use shared event handlers: canvas.addEventListener("mousemove", check); canvas.addEventListener("click", check); } 
 canvas {border:1px solid blue;background:#eee}