HTML5 Canvas Tooltips

easeljs, html, javascript, tooltip

Solution

Here's how I would do it:

stage.enableMouseOver();

bitmap.onMouseOver = function(e) {
    stage.canvas.title = 'put your tooltip text here';
}

bitmap.onMouseOut = function(e) {
    stage.canvas.title = '';
}

This works by using tooltips already provided by the browser.

Problem

I am using the HTML5 Canvas. I have added images (BitmapImages) to the canvas and I now want to add simple tooltips to these bitmap images. Is this possible ??? If so can someone tell / show me how I could achieve this ? I am not sure if it makes a difference , but I am also using the Easel JS Framework ... Here is an example of what I currently have: ``` var container = new Container(); // EaselJS Container container.x = 100; container.y = 100; stage.addChild(container); var image = new Image(); image.src = "image.png"; var bitmap = new Bitmap(image); bitmap.x = 5; bitmap.y = 5; bitmap.mouseEnabled = true; container.addChild(bitmap); ... ``` I have not tested this code, but basically a bitmap image is created and added to my stage. I now want to add a simple tool tip to my bitmap image, but cant seem to work out how :( Any help would be greatly appreciated. Cheers, Jon.

Original source