Question

我搜索过许多自定义css工具提示。我把一对夫妇合二为一，我非常喜欢，但我有一个问题，我希望它是可以解决的。

我无法解决的问题是如何使工具提示居中于鼠标。 javascript是让它在鼠标上移动的原因所以我确信在＃34; e.clientX＆＃34;我需要添加它来居中它而不是只设置60px但是真的不知道javascript。

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

int main(void) {
    void (*p)(void) = g;
    f(&p);
    return EXIT_SUCCESS;
}

Answer 1

您只需在计算中添加工具提示的宽度。

var name = inputElements[j].getAttribute('name');
if (name.indexOf('instanceActeurRole[0]') == 0) {
    inputElements[j].setAttribute('name', name.replace("0", nouveauIndex));
}

这是更新的fiddle

Answer 2

只需将宽度除以2即可将其居中：

    window.onmousemove = function (e) {

        for (var i = 0; i < tooltips.length; i++) {

            tooltips[i].style.top = (e.clientY - 40) + 'px';
            tooltips[i].style.left = (e.clientX - (tooltips[i].offsetWidth / 2)) + 'px';
        }
    };

jsFiddle＆＃39; here 。另外，请注意我也更改了CSS：在.tooltiptext上我删除了边距20px并将位置更改为绝对。此外，无需将X和Y值缓存到变量中，因为您只使用这些值一次。最后，原始小提琴行20中的CSS错误，Left不是有效属性。

在鼠标悬停时使用CSS中心工具提示

2 个答案: