bootstrap tooltip \ popover-解决左侧不一致的问题 [英] bootstrap tooltip\popover - solving inconsistent placement to the left

问题描述

我一直在从事一个项目，我已经注意到我想解决的自举行为的一些不一致之处.

I've been working on a project and I've noticed some inconsistency in bootstrap's behavior that I would like to solve.

当弹出窗口(或工具提示，基本上相同)在屏幕边缘附近时(如果是右侧，则在靠近边缘时)会收缩，以免离屏(它只能工作到一定程度，但这通常就足够了.

When a popover (or tooltip, whatever, they're basically the same) is nearing the edge of the screen - if it's a right-sided one, when nearing the edge - it will contract so as not to go offscreen (it only works up to a point, but that's usually enough).

如果放置位置在左侧，则不会发生这种情况.

This doesn't happen when the placement is to the left.

即:

正确的位置:

正常宽度:

靠近边缘:

左侧位置:

正常宽度:

靠近边缘

这些图片来自一个小的演示我写来说明这个问题.

These images are from a small DEMO I wrote to illustrate the problem.

到目前为止，我已经弄乱了源代码，但无济于事.我似乎无法将手指放在最初导致此行为的确切原因上.

I've messed around with the source code, so far to no avail. I can't seem to place my finger on what exactly causes this behavior in the first place.

有什么想法吗?

ps.s.

我正在使用Bootstrap 3.1.1.新的3.2版不能不能解决问题(我现在希望避免升级).

I'm using Bootstrap 3.1.1. The new 3.2 does not solve the issue (and I would like to avoid upgrading at this point).

主要更新！

经过一番挖掘，我发现这与引导程序无关-它是简单的CSS-似乎当您绝对定位一个元素并将其推到侧面时，它将尝试并与屏幕保持一致.

After some digging, I figured out that this has nothing to do with bootstrap - it's simple css - it seems that when you position an element absolutely and push it to the sides it will try and stay withing the screen.

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

I never knew about this behavior, and it happens automatically - but only to the the direction you're pushing - i.e. a div pushed from the left will contract when reaching the right edge of the screen and vice versa.

碰巧的是，弹出窗口仅使用left分配进行定位-这就是为什么我们看到不一致的行为的原因-当将其推向右侧时，它会收缩而不是向其他方向收缩.

It just so happens that popovers are only positioned with the left assignment - which is why we're seeing the inconsistend behavior - when it's pushed to the right it contracts but not the other direction.

因此解决方案是改为分配right-听起来很简单? 没那么多.我获取了源代码并对其进行了一些操作，添加这些行(在jsfiddle):

So the solution is to assign right instead - sounds simple? Not so much. I took the source code and manipulated it a bit, adding these lines (somewhere arond line 250 in the jsfiddle):

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)，然后从右侧获取距离.

Seems reasonable, right? If the offset to the left is less than 0 (i.e., it goes offscreen) then calculate the window width and remove from that the left offset and the width of the popover (actualWidth) itself and you get the distance from the right.

然后，确保将偏移量重置为左侧并应用正确的位置. 但是 ...它仅能起作用-也就是说，它只能在第二次起作用.

Then, make sure to reset the offset left and apply the right positioning. But... it only sorta works - which is to say it only works the second time around.

亲自检查 ！将鼠标悬停一次，然后放错位置，将鼠标拉到一边，然后重试一次，突然它的位置正确.到底是什么?

Check it out for yourself! Hover once, and it's misplaced, pull the mouse to the side and try again and suddenly it's positioned correctly. What the hell?

修改

好吧，这似乎很多了，所以我要澄清一下:

Ok this seems to come up a lot, so I'll make it clear:

我知道auto的位置.我不要我想控制弹出窗口的位置，让它自动决定不是解决问题的方法，而只是避免出现问题

I know about auto placement. I don't want it. I want to control where the popover goes, letting it decide automatically is not a solution to the problem, it's merely avoiding it

推荐答案

好的，我已经走近了.

Ok, I've gotten a little closer.

在css中分配了right后，actualWidth和actualHeight将会更改，因此您需要更新这些变量.在jsfiddle的253行周围:

Once you assign the right in css, the actualWidth and actualHeight will change, so you need to update those variables. Around line 253 in your jsfiddle:

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设置得太高，因此您无法阅读工具提示的顶部.

This works the first time you hover, but every time after that, it sets the top to be too high, so you can't read the top of the tooltip.

更新: 似乎设置了right值会弄乱applyPlacement函数中的位置.要解决此问题，请先设置right值，然后再设置初始ActualWidth和ActualHeight(在第225行附近):

UPDATE: It appears that having the right value set is messing up the positioning in the applyPlacement function. To fix this, clear the right value before setting the initial actualWidth and actualHeight (around line 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

这篇关于bootstrap tooltip \ popover-解决左侧不一致的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！