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

Question

我想将我的引导弹出窗口重新定位在左侧，即我想将整个弹出窗口移动到左侧，而白色箭头会留在一个地方。

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

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

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

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

我现在拥有的（弹出框在右侧，屏幕边缘和弹出框之间没有位置）

我想要的（弹出框和显示器边缘之间的小距离）：

Answer 1

“我想改变这个弹出框内容的位置，这样 箭头将进一步放在左侧„

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

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

但这会影响所有弹出框。 Popovers 被注入和从 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;            
    }   
})

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

查看演示 -> 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>

角度代码：

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

我已根据您显示的图像编辑了答案。 如果这不是答案，请在下方评论。

问候 D.