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

时间:2017-04-22 00:00:41

标签: javascript html css tooltip

我正在尝试在我正在创建的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>

我已经用锚点图标替换了这里的锚图标,但我正在使用&#34;字体很棒&#34;实际代码中的图标。

2 个答案:

答案 0 :(得分:0)

尝试使用client代替page,如下所示:

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

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

答案 1 :(得分:0)

这是一个解决方案:

https://jsfiddle.net/qdsq0s9h/

主要问题是,你的工具提示是一个带有display:fixed style的元素。当您更改工具提示的位置时,它会计算相对于锚图标(.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();
});