HTML5画布工具提示

Question

我正在使用HTML5画布。我已经将图片（BitmapImages）添加到画布上，现在想要为这些位图图像添加简单的工具提示。

有可能吗？如果可以，有人能告诉/展示我如何实现吗？

我不确定是否有区别，但我也在使用Easel JS框架...

以下是我目前拥有的一个例子：

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);

...

我尚未测试过这段代码，但基本上创建了一个位图图像并将其添加到我的舞台中。现在我想给我的位图图像添加一个简单的工具提示，但似乎无法弄清楚如何实现 :(

非常感谢任何帮助。

谢谢， Jon.

- Jon Williams

Answer 1

这是我的做法：

stage.enableMouseOver();

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

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

这个方法通过使用浏览器已提供的工具提示来实现。

- jalbee

---

我在哪里可以看到这些工具提示？我什么都没看到。使用impactjs。 - Prat

这是一个浏览器工具提示，只有在将光标悬停在其上一两秒钟时才会显示。您可以通过将光标悬停在此页面上的赞/踩按钮上来查看此样式的工具提示的示例。 - jalbee

这个问题的前提是Bitmaps被添加到了Canvas元素中，这意味着调用了"context.drawImage(bitmap)"。这意味着它们不作为DOM元素可用，也因此无法创建标准的提示框。我对这个答案被标记为"已接受"并且获得了奖励感到惊讶... - A. K-R

@A.K-R 仔细查看一下代码。虽然位图不是 DOM 元素，但舞台肯定是--工具提示是在舞台上创建的，而不是 EaselJS 位图对象上创建的。 - jalbee