Question

我使用画布来呈现几个UI组件。我正在设置canvas.title以显示每个组件的帮助。

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

问题在于，当鼠标移动时，工具提示被隐藏，直到我将鼠标移出然后移回画布后才会重新显示。

我想改变行为，以便当我将鼠标悬停在另一个UI组件而不离开canvas元素时再次显示工具提示？

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。

如何在鼠标移动后重新显示工具提示

3 个答案: