Подсказки холста HTML5

Я использую холст HTML5. Я добавил изображения (BitmapImages) на холст, и теперь я хочу добавить простые всплывающие подсказки к этим растровым изображениям.

Это возможно ??? Если да, то может ли кто-нибудь рассказать/показать мне, как я могу этого добиться?

Я не уверен, что это имеет значение, но я также использую Easel JS Framework...

Вот пример того, что у меня сейчас есть:

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

...

Я не тестировал этот код, но в основном создается растровое изображение и добавляется на мою сцену. Теперь я хочу добавить простую подсказку к моему растровому изображению, но, похоже, не могу понять, как это сделать :(

Любая помощь будет принята с благодарностью.

Здоровья, Джон.


javascript html tooltip easeljs
person Jon Williams    schedule 11.07.2012    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Вот как бы я это сделал:

stage.enableMouseOver();

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

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

Это работает с использованием всплывающих подсказок, уже предоставленных браузером.

person jalbee    schedule 13.07.2012
comment
Где бы я мог увидеть эти всплывающие подсказки? Я ничего не вижу. Использование Impactjs - person Prat; 07.08.2013
comment
Это всплывающая подсказка браузера, поэтому она отображается только в том случае, если вы удерживаете над ней курсор в течение секунды или двух. Вы можете увидеть пример всплывающей подсказки в этом стиле, наведя курсор на кнопки «за»/«против» на этой странице. - person jalbee; 08.08.2013
comment
Вопрос включает в себя то, что растровые изображения добавляются к элементу Canvas, что означает, что был вызван context.drawImage(bitmap). Это означает, что они недоступны как элементы DOM и, следовательно, не создают стандартную всплывающую подсказку. Интересно, этот ответ был помечен как «Принятый» и даже получил награду... - person A. K-R; 22.12.2015
comment
@ AK-R Посмотрите на код поближе. Хотя растровое изображение не является элементом DOM, рабочая область определенно им является — всплывающая подсказка создается на рабочей области, а не на объекте EaselJS Bitmap. - person jalbee; 10.02.2016