HTML5 Canvas Tooltips

Question

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.

Answer 1

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.