Как отобразить подсказку после перемещения мыши

Question

Я использую холст для представления нескольких компонентов пользовательского интерфейса. Я устанавливаю canvas.title, чтобы предоставить помощь для каждого компонента.

... 
if(mouse.y >= y && mouse.y <= y + w && mouse.over){ 
    if(currentId !== tool.id){ 
     canvas.title = tool.help; 
    } 
    currentId = tool.id; 
... 

Проблема заключается в том, что, когда мышь перемещается подсказка скрыта и не будет повторно дисплей, пока я не перемещаете мышь и затем перейти обратно на холст.

Я хотел бы изменить поведение, чтобы подсказка инструмента отображалась снова, когда я наводил курсор на другой компонент пользовательского интерфейса, не покидая элемент холста?

Answer 1

Реализации пользовательской подсказки дает больше свободы и контроль.

Это простой пример http://jsfiddle.net/mynetx/5qbP3/ Вы можете взять идеи и построить отсюда. Другим преимуществом является контроль над CSS, который в таких случаях, как ваш, где вы хотите предоставить помощь.

window.addEventListener("load", function() { 
var couponcodes = document.getElementsByClassName("couponcode"); 
for (var i = 0; i < couponcodes.length; i++) { 
    couponcodes[i].addEventListener("mouseover", function() { 
     var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; 
     coupontooltip.removeAttribute("style"); 
    }); 
    couponcodes[i].addEventListener("mouseout", function() { 
     var coupontooltip = this.getElementsByClassName("coupontooltip")[0]; 
     coupontooltip.style.display = "none"; 
    }); 
} }); 

Answer 2

Подсказки являются частью системы, в которой работает браузер, и, к сожалению, они не доступны никоим образом от JavaScript.

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

Если вы беспокоитесь о доступности, то можно дать элемент «подсказку» роль: http://accessibility.athena-ict.com/aria/examples/tooltip.shtml

Answer 3

Вы можете использовать fabric.js. см. this.