javascript - 滚动后悬停工具提示停止工作

Question

我正在尝试在我正在创建的 tumblr 主题的右下角添加一个谨慎的信用链接，当鼠标悬停在上面时，它会显示一个跟随光标的工具提示。问题是，除非用户位于页面的最顶部，否则工具提示不会显示，并且如果用户向下滚动则完全停止工作。

我不是一个非常有经验的程序员并且完全是自学的，所以如果解决方案非常简单，我深表歉意。这是我正在处理的博客的链接:http://mayfrogs.tumblr.com/
这是一个带有信用按钮基本代码的 jsfiddle:https://jsfiddle.net/kbsnzfyd/2/
我认为这是位置属性的问题，但我需要将功劳放在右下角，我能找到让它留在那里的唯一方法是给它一个固定的位置。这是 CSS:

.c:hover .c-tooltip {
    display:block;
}

.c-tooltip {
    display:none;
    background: #b3d9ff;
    border:1px solid #e0f3f8;
    font-variant:small-caps;
    letter-spacing:2px;
    font-weight:bold;
    font-size:10px;
    text-align:center;
    border-radius:5px;
    margin-left: -85px;
    margin-top:-50px;
    position:fixed;
    padding: 10px;
    z-index: 1000;
    width:60px;
    height:30px;
}

.c {
    position: fixed;
    z-index:800;
    bottom:15px;
    right:15px;
}

.c a {
    text-decoration: none;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.c a:hover {
    color:#99ccff;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

javascript:

var tooltip = document.querySelectorAll('.c-tooltip');

document.addEventListener('mousemove', fn, false);

function fn(e) {
    for (var i=tooltip.length; i--;) {
        tooltip[i].style.left = e.pageX + 'px';
        tooltip[i].style.top = e.pageY + 'px';
    }
}

和 html:

<div class="c"><a href="http://mayfrog-themes.tumblr.com/">
    (Anchor Icon)</a>
    <span class="c-tooltip">Theme by Mayfrogs</span>
    </div>

我已将此处的 anchor 图标替换为 (Anchor Icon)，但我在实际代码中使用的是“font awesome”图标。

Answer 1

尝试使用 client 而不是 page，像这样:

tooltip[i].style.left = e.clientX + 'px';
tooltip[i].style.top = e.clientY + 'px';

这将获取鼠标指针坐标而不是页面，因为这些将在您滚动时向下移动。