javascript - HTML5 Canvas Tooltips - Stack Overflow

admin管理员组

文章数量:1353284

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.

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.

• javascript
• html
• tooltip
• easeljs

Share Improve this question Follow asked Jul 11, 2012 at 16:30 Jon WilliamsJon Williams 5911 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +50

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.

本文标签： javascriptHTML5 Canvas TooltipsStack Overflow