Question

在我的网页上，我希望在用户加载页面时显示工具提示，但我希望它们在用户滚动容器后消失。如果它们滚动回容器的顶部，则应重新显示工具提示。这是因为我找不到解决另一个问题的方法[Tooltips cutoff in container

我认为代码应该非常简单 - 我检查容器的scrollTop并确定是否显示工具提示：

$('.stepDetailView').scroll(function(e){
    console.log($(this).scrollTop());
    if($(this).scrollTop() > 0){
        $('#step_name').tooltip('hide');
        $('#uploadMedia').tooltip('hide');
        $('.detailViewText').tooltip('hide');
        $('.update_step_button').tooltip('hide');
    }else{
        $('#step_name').tooltip('show');
        $('#uploadMedia').tooltip('show');
        $('.detailViewText').tooltip('show');
        $('.update_step_button').tooltip('show');
    }
});

这似乎有助于淡出工具提示，但当我想要再次出现工具提示时，它们似乎会在淡出之前闪烁一秒：

http://youtu.be/4WtiAoPrK1o

如何确保工具提示保持可见？

Answer 1

我似乎通过使用超时来解决问题：

// hide or show tooltips depending on scroll position
$('.stepDetailView').scroll(function(e){
    setTimeout(function(){
        if($('.stepDetailView').scrollTop() > 0){
            $('#step_name').tooltip('hide');
            $('#uploadMedia').tooltip('hide');
            $('.detailViewText').tooltip('hide');
            $('.update_step_button').tooltip('hide');
        }else{
            $('#step_name').tooltip('show');
            $('#uploadMedia').tooltip('show');
            $('.detailViewText').tooltip('show');
            $('.update_step_button').tooltip('show');

        }
    }, 50);
});

工具提示在节目上闪烁

1 个答案: