用於在畫布中繪製的矩形區域的彈出工具提示

Question

我有一個矩形區域，我正在使用HTML5中的JavaScript填充，並且我需要添加一個工具提示彈出窗口，以在用戶在手中觸摸/點擊時彈出文本在瀏覽器中保留或懸停在它上面。我已經看過StackOverflow上已有的示例，但似乎沒有一個解決這個特定情況，其中包含懸停點的區域是使用JavaScript繪製的。

任何援助，將不勝感激，謝謝。

Answer 1

做一個簡單的工具提示類/對象將處理狀態，位置等

例

• 這將創建類
• 當懸停或點擊框的一個實例，它會顯示
• 超時後，它會隱藏工具提示

一個考慮，我s未實現：如果顯示第二個實例，則前一個未隱藏。創建一個公共方法來清除超時並在其他實例發生這種情況時將其隱藏（將它們存儲在數組中並迭代它以調用hide方法）。

無論如何，這應該是一個堅實的基礎，以任何你喜歡的方式發展。

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}

<canvas width=500 height=300></canvas>