javascript - bootstrap tooltip\popover - 解决左侧放置不一致的问题

Question

我一直在做一个元素，我注意到我想要解决的 Bootstrap 行为中的一些不一致。

当弹出窗口(或工具提示，无论什么，它们基本相同)接近屏幕边缘时 - 如果它是右侧的，当接近边缘时 - 它会收缩以免离开屏幕(它只能在一定程度上起作用，但这通常就足够了。

当展示位置在左侧时不会发生这种情况。

即:

正确的位置:

正常宽度:

靠近边缘:

左侧位置:

正常宽度:

靠近边缘:

这些图片来自小DEMO我写信来说明这个问题。

我把源代码搞得一团糟，至今无济于事。我似乎无法弄清楚到底是什么导致了这种行为。

有什么想法吗？

附注

我正在使用 Bootstrap 3.1.1。新的 3.2 没有解决这个问题(我想避免在此时升级)。

---

重大更新!

经过一些挖掘，我发现这与 bootstrap 无关 - 它是简单的 css - 似乎当你绝对定位一个元素并将其推到两侧时，它会尝试并留在屏幕内。

我从来不知道这种行为，它会自动发生 - 但只会发生在你插入的方向 - 即从左边插入的 div 在到达屏幕的右边缘时会收缩，反之亦然。

碰巧的是，弹出框仅使用 left 赋值定位 - 这就是我们看到不一致行为的原因 - 当它被推到右边时它会收缩而不是另一个方向。

所以解决方案是分配权利——听起来很简单？ 没那么多。我拿了源代码并对其进行了一些操作，adding these lines (jsfiddle 中第 250 行的某处):

if (placement == 'left' && offset.left < 0) {
    var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
}

看起来很有道理吧？如果左侧的偏移量小于 0(即，它离开屏幕)，则计算窗口宽度并从中删除左侧偏移量和弹出框本身的宽度(actualWidth)，您将得到与右侧的距离。

然后，确保重置左侧偏移并应用右侧定位。 但是...它只能在某种程度上起作用——也就是说它只能在第二次起作用。

检查一下 for yourself !悬停一次，它放错了位置，将鼠标拉到一边再试一次，突然它就定位正确了。什么鬼？

编辑

好的，这似乎经常出现，所以我会说清楚:

我知道 auto 放置。我不想要它。 我想控制popover的去向，让它自动决定并不能解决问题，只是避免它而已

Answer 1

好的，我已经接近了一点。

在 css 中分配 right 后，actualWidth 和 actualHeight 将发生变化，因此您需要更新这些变量。在您的 jsfiddle 中的第 253 行附近:

if (placement == 'left' && offset.left < 0) {
    var right = (  $(window).width() + 10) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
    actualWidth  = $tip[0].offsetWidth;
    actualHeight = $tip[0].offsetHeight;
}

这在您第一次悬停时有效，但此后每次都会将 top 设置得太高，因此您无法阅读工具提示的顶部。

更新: 似乎设置了 right 值会打乱 applyPlacement 函数中的定位。要解决此问题，请在设置初始 actualWidth 和 actualHeight 之前清除 right 值(第 225 行左右):

$tip.css({ 'right': '' });
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth  = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight