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

Question

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

我不是一个非常有经验的程序员并且完全是自学的，所以如果解决方案非常简单，我深表歉意。这是我正在写的博客的 link：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>

我已将此处的锚图标替换为（锚图标），但我在实际代码中使用的是 "font awesome" 图标。

Answer 1

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

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

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

Answer 2

这是一个解决方案：

https://jsfiddle.net/qdsq0s9h/

主要问题是，您的工具提示位于具有 display:fixed 样式的元素中。当您更改工具提示的位置时，它会计算相对于锚点图标（.c 元素）的顶部和左侧值。

var tooltip = $('.c-tooltip');
var offset = 30;
document.addEventListener('mousemove', fn, false);

function fn(e) {
    $(document).mousemove(function(e){
        $(tooltip).css({left:e.pageX-tooltip.width()-offset, top:e.pageY-tooltip.height()-offset});
    });
}

$( ".c" ).on( "mouseover", function() {
    $( ".c-tooltip" ).show();
});

$( ".c" ).on( "mouseout", function() {
    $( ".c-tooltip" ).hide();
});

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

Hover tooltip stops working after scrolling

html

javascript

css

tooltip