Displaying tooltips on mouse hover on shapes/position(coordinates) on canvas

Question

I'm trying to display a corresponding tooltip when mouse hovers on certain places on canvas. For example, when the mouse position on the canvas is at the coordinate (100,100), display tooltip1. When mouse position's at (200,200), display tooltip2, etc.,

I've already added event listeners to detect mouse movement and get mouse positions.Here's my part:

window.addEventListener('mousemove',hover,false);
function getMousePos (canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}
function hover (event){
    pos = getMousePos(canvas,event);
    if (condition to detect mouse hover)
    //display tooltip_function (this is the function that I don't know how to implement)
}

Answer 1

You can test if the mouse is over one of your circular hot-spots like this:

var hotspots=[
    {x:100,y:100,radius:20,tip:'You are over 100,100'},
    {x:100,y:200,radius:20,tip:'You are over 100,200'},
];

var dx=mouseX-hotspot[0].x;
var dy=mouseY-hotspot[0].y;

if (dx * dx + dy * dy < hotspot[0].radius * hotspot[0].radius) {
  // it's over hotspot[0]
}

Here's example code and a Demo:

Note: you don't need to show the circular hotspots as in demo--that's just for this demo

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
function reOffset() {
  var BB = canvas.getBoundingClientRect();
  offsetX = BB.left;
  offsetY = BB.top;
}
var offsetX, offsetY;
reOffset();
window.onscroll = function (e) {
  reOffset();
};
window.onresize = function (e) {
  reOffset();
};

var hotspots = [
  { x: 100, y: 100, radius: 20, tip: "You are over 100,100" },
  { x: 100, y: 200, radius: 20, tip: "You are over 100,200" },
];

draw();

$("#canvas").mousemove(function (e) {
  handleMouseMove(e);
});

function draw() {
  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    ctx.beginPath();
    ctx.arc(h.x, h.y, h.radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.stroke();
  }
}

function handleMouseMove(e) {
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);

  ctx.clearRect(0, 0, cw, ch);
  draw();
  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    var dx = mouseX - h.x;
    var dy = mouseY - h.y;
    if (dx * dx + dy * dy < h.radius * h.radius) {
      ctx.fillText(h.tip, h.x, h.y);
    }
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hover over a hotspot circle</h4>
<canvas id="canvas" width=300 height=300></canvas>