css - Bootstrap popover - 将其移动到左侧/右侧

Question

我想在左侧重新定位我的 bootstrap popover，即我想将整个 popover 移动到左侧，而白色箭头将留在一个位置。

我想要 google.com 网站上的效果，当您单击蓝色图标时，您会看到弹出窗口，但其内容已重新定位，而白色箭头位于用户下方。

我知道我可以使用这样的东西:

.popover {
    top:0 !important;
    margin-top:10px;
}

不幸的是，它用白色箭头重新定位了整个弹出窗口。

我现在拥有的(弹出窗口在右侧，屏幕边缘和我的弹出窗口之间没有空间)

我想要的(弹出窗口和显示器边缘之间的小距离):

Answer 1

“I want to change the position of content of this popover so that this arrow will be placed further on the left„

当显示弹出窗口时，箭头位置是根据宽度/高度和位置在 Tooltip.prototype.replaceArrow 中计算的。您可以使用此 CSS 强制指定位置:

.popover .arrow {
    left: 90px !important; /* or 45% etc */
}

但这会影响所有的弹出窗口。 Popovers 被注入(inject) DOM 或从 DOM 中移除，默认情况下无法单独定位可见的 popovers。如果您想在特定弹出窗口上设置箭头样式，解决方法是挂接到 shown.bs.popover 事件，检测正在显示的弹出窗口，并在需要时为该弹出窗口设置箭头样式.示例:

.on('shown.bs.popover', function() {    
    var $popover = $('.popover')[0];
    switch ($(this).attr('id')) {
        case 'a' : $popover.find('.arrow').css('left', '10px');break;
        case 'b' : $popover.find('.arrow').css('left', '40%');break;            
        case 'c' : $popover.find('.arrow').css('left', '180px');break;            
        default : break;            
    }   
})

要让它工作，必须一次只显示一个弹出窗口(参见 fiddle )。它也可以用多个可见的弹出框来解决，但是我们需要向弹出框内容添加一些 HTML。

查看演示 -> http://jsfiddle.net/uteatyyz/