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

Question

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

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

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

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

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

我现在拥有的东西（popover在右侧，屏幕边缘和我的popover之间没有位置）

我想拥有的东西（弹出式窗口和显示器边缘之间的距离很小）：

Answer 1

  

“我想改变这个popover内容的位置，以便这样做   箭头将放在左侧“

当显示弹出框时，箭头位置将根据宽度/高度和位置在Tooltip.prototype.replaceArrow中计算。您可以使用此CSS强制使用特定位置：

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

但这会影响所有的弹出窗口。弹出窗口是从DOM注入和删除的，默认情况下无法单独定位可见的弹出窗口。如果要在特定弹出窗口上设置箭头样式，则解决方法是挂钩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;            
    }   
})

要使其工作，一次只能显示一个弹出框（参见小提琴）。它也可以用多个可见的弹出窗口来解决，但是我们需要在弹出窗口内容中添加一些HTML。

参见演示 - ＆gt;的 http://jsfiddle.net/uteatyyz/

Answer 2

正如我目前所理解的那样，你想要实现按钮左侧的弹出窗口。

请检查此Plunker Link

  

HTML代码：

  <div class="pull-right">
    <button type="button" mypopover data-placement="left" title="title">Click here</button>
  </div>

  

Angular Code：

    var options = {
        content: popOverContent,
        placement: "bottom",
        html: true,
        date: scope.date,
        trigger: 'focus'
    };

我根据您展示的图片编辑了答案。 如果这不是答案，那么请在下面评论。

问候D.