【问题】解决tooltip.js有滚动条时错位

声明:用的不是bootstrap的tooltip组件

在这里插入图片描述

<link th:href="@{/static/libs/tooltip/tooltip.css}" rel="stylesheet"/>
<script th:src="@{/static/libs/tooltip/tooltip.js}"></script>
<script>
    $(function(){
        showTips();
    });

    function showTips() {
        var arr = $('.myscroll span p');
        for(var i = 0,len=arr.length; i<len; i++){
            var _this = arr[i];
            var desc = $(_this).attr("desc");
            var time = $(_this).attr("time");
            $(_this).tooltip({
                text: '— 获取条件 —<br/>'+desc+'<br/>— 生效日期 —<br/>'+time,
                theme: 'light',
                textColor: '#999',
                shadowColor: '#6f6f6f',
                fontSize: '14px',
                fontFamily: "'Open Sans', 'Roboto-Regular', Arial",
            });
        }

    }
</script>

解决思路:
找到定位提示框的高度 减去 滚动条的高度,每次显示时动态计算一下。
解决办法:
修改tooltip.js源码
找到变量topPos,在这之前定义一个获取滚动条的高度的变量。

var scrollTopHeight = $(window).scrollTop();
var topPos = $(this).offset().top + $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom')) + 10 - scrollTopHeight;

有两处要修改
源码下载:https://download.csdn.net/download/Jul_11th/16768000

谢谢支持!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值