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)
}
You can test if the mouse is over one of your circular hot-spots like this:
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