javascript - 鼠标悬停时使用 CSS 居中工具提示

Question

我搜索了很多自定义 CSS 工具提示。我将一对组合成一个我真正喜欢的组合，但我有一个问题，我希望它可以解决。

我无法解决的问题是如何使工具提示在鼠标上居中。 javascript 是它在鼠标上移动的原因，所以我确定在“e.clientX”周围有一些代码我需要添加到它以使其居中而不是仅仅设置 60px 但我真的不知道 javascript。

这是一个 fiddle :http://jsfiddle.net/kkx9uhu1/如果将鼠标悬停在颜色方 block 上，则会显示使用 CSS 自定义的工具提示。

    var x = (e.clientX - 60) + 'px',
    y = (e.clientY - 40) + 'px'; // Here the 60 should be something to center the tooltip instead

Answer 1

您只需将工具提示的宽度添加到您的计算中即可。

window.onmousemove = function (e) {

    for (var i = 0; i < tooltips.length; i++) {
        var width = tooltips[i].offsetWidth;
        var x = (e.clientX - (width)/2) + 'px',
            y = (e.clientY - 40) + 'px';

        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};

这是更新的 fiddle