Javascript 如果元素在视口中可见，则显示工具提示

在得到一点建议之后。我正在处理我的公文包，我正在使用css转换来为一个元素设置动画，其中包含一些联系人信息，当用户向上滚动时，这些信息将变为活动状态

在这个元素中有一个名为“.top bar avatar”的图形类元素，我还添加了一个工具提示和反弹动画。这是所有工作，但我想实现的是工具提示自动显示，并在图形显示在web浏览器中时启动动画

HTML

JS

$（'[data toggle=“tooltip”]'）。tooltip（）

var lastScrollPosition=0；
window.onscroll=函数（）{
var newScrollPosition=window.scrollY；
if（newScrollPosition

尝试了几种不同的方法，但尚未成功。如有任何建议，将不胜感激。提前干杯
我自己似乎已经解决了这个问题，我只是简单地添加和删除了display属性，并在现有代码中修改了它的值，见下文

哦，我还向image元素添加了一个名为'profile pic'的div id，而不是关注其中包含的figure类

var lastScrollPosition = 0;
window.onscroll = function() {
    var newScrollPosition = window.scrollY;

    if (newScrollPosition < lastScrollPosition){
        //upward code here
        $('.top-bar').addClass('top-bar-animate');
        // display tool-tip when top-bar animates in
        $('#profile-pic').tooltip('show');
    }else{
        //downward - code here
        $('.top-bar').removeClass('top-bar-animate');
        // hide tool-tip when top-bar animates out
        $('#profile-pic').tooltip('hide');
    }
    lastScrollPosition = newScrollPosition;
}

var lastScrollPosition=0；
window.onscroll=函数（）{
var newScrollPosition=window.scrollY；
if（newScrollPosition
不确定您想要的输出是什么，但我建议不要在页面中隐藏您的联系信息。尽管动画可能很可爱。谢谢，但这并没有真正的帮助。该元素主要隐藏在主菜单后面，以便用户在更多屏幕上查看其内容。当尝试向上滚动时，用户会在图的右侧看到我的手机和电子邮件。我想要的是播放“图反弹”动画，并在我的消息中自动显示工具提示。当用户点击图形时，一个模式窗口打开。这应该是一个简单的例子，比如当元素可见时，将工具提示的不透明度级别设置为1。
var lastScrollPosition = 0;
window.onscroll = function() {
    var newScrollPosition = window.scrollY;

    if (newScrollPosition < lastScrollPosition){
        //upward code here
        $('.top-bar').addClass('top-bar-animate');
        // display tool-tip when top-bar animates in
        $('#profile-pic').tooltip('show');
    }else{
        //downward - code here
        $('.top-bar').removeClass('top-bar-animate');
        // hide tool-tip when top-bar animates out
        $('#profile-pic').tooltip('hide');
    }
    lastScrollPosition = newScrollPosition;
}