如何使鼠标悬停时工具提示保持可见？

Question

我有一些工具提示的玩具代码。它可以正常工作，除了当你鼠标进入工具提示时它会被这个逻辑隐藏起来。

我正在敲打我的脑袋试图找出一种干净的方法让你的鼠标进入工具提示时保持可见，当你将鼠标移出两个区域时它会消失。有人有建议吗？

See the example.

HTML

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

的Javascript

var div1 = $("#div1");
var div2 = $("#div2").hide();

var hoverTimer;
div1.mouseenter(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    div1.mousemove(function(e) {
        x = e.pageX;
        y = e.pageY;
    });
    hoverTimer = window.setTimeout(function() {
        div2.css("left", x);
        div2.css("top", y);
        div2.show();
    }, 400);
});

div1.mouseleave(function(e) {
    window.clearTimeout(hoverTimer);
    div2.hide();
});

CSS

#container {
    position: relative;
}
#div1 {
    float: left;
    clear: none;
    width: 200px;
    height: 200px;
    background-color: green;
}
#div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: blue;
}

Answer 1

您创建了mousemove事件，但除了设置两个变量之外，您从未实际移动工具提示。请尝试使用this。注意我在鼠标位置添加了一个16像素的“边距” - 这是为了使其更符合实际的工具提示，并防止闪烁效果。

Answer 2

显示工具提示的最佳方法是仅使用CSS。

例如

假设我有一些必须提供工具提示的元素。我将为该元素赋予data属性，然后使用CSS访问该属性，然后显示如下的工具提示

<a data-tool-tip="my tool tip"> my link goes here</a> this is other text

和CSS如下所示

a[data-tool-tip]{
   position:relative;
}


a[data-tool-tip]::after {
    content: attr(data-tool-tip);
    display:block;
    position:absolute;
    background:gray;
    padding:10px;
    color:white
    border-radius:5px
    font-size:0.8em;
    bottom:100%;
    left:0;
     white-space:nowrap; 
     transform:scale(0);
transition:transform ease-out 150ms;
    }

 a[data-tool-tip]:hover::after {
 transform:scale(1);
}

作为使用::before选择器添加到元素本身的工具提示，也将在鼠标进入后可见；

输出将如下所示