标签:定位不对

Bootstrap Tooltip在页面出现滚动条时定位不准确

发表于1年前(Feb 26, 2017 12:04:52 PM)  阅读 1458  评论 1

分类: JS WEB前端

标签: bootstrap tooltip 定位不对 滚动条

首先我们看下下面的图片:

这是一个表单的验证,笔者的实现方式是在出现错误时,给控件加载一个红色边框,然后再旁边显示一个Bootstrap原生的Toolltip,笔者简单的实现了一下,发现一个问题,如果当页面出现滚动条,将会出现下面的现象:

可以明显看到,提示位置定位错了。但很奇怪的是提示的三角形并没有定位错。

最开始以为是data-container设置错误,后来确认不是data-container设置问题,查了下源码,发现了如下关键的代码:

  Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
    var delta = { top: 0, left: 0 }
    if (!this.$viewport) return d
......