显示时工具提示闪烁

Tooltip flickering on show

本文关键字：闪烁 工具提示 显示      更新时间：2023-09-26

在我的网页上，我希望工具提示在用户加载页面时显示，但我希望它们在用户滚动容器后消失。如果他们滚动回容器的顶部，工具提示应该重新出现。这是因为我找不到解决另一个问题的方法[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

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

我似乎已经通过使用超时解决了这个问题:

// 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);
});
相关文章：