如何定位Bootstrap popover？

Question

我正在尝试为一个触发器定位一个Bootstrap popover，该触发器位于960px宽网页的最右上角。

理想情况下，我将它放在底部并用CSS移动箭头（因此箭头位于弹出窗口的右上角）。不幸的是，“放置”：“底部”定位还不够，因为它会将其置于触发器下方。

我正在寻找能够将弹出窗口静态放置在触发器左下方的解决方案。

Answer 1

这有效。测试。

.popover {
    top: 71px !important;
    left: 379px !important;
}

Answer 2

如果你看看bootstrap source codes，你会发现可以使用保证金修改头寸。

所以，首先你应该改变popover模板来添加自己的css类，以免与其他弹出窗口冲突：

$(".trigger").popover({
  html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

然后使用css你可以轻松切换弹出位置：

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important; /* fix arrow position */
}

此解决方案不会影响您拥有的其他弹出窗口。同样的解决方案也可以用在工具提示上，因为popover类继承自tooltip类。

Here's a simple jsFiddle

Answer 3

只需在弹出框中添加一个属性！如果你赶时间，请参阅my JSFiddle。

我们想要为特定的popover添加ID或类，以便我们可以通过CSS以我们想要的方式自定义它。

请注意，我们不想自定义所有弹出窗口！这是一个糟糕的主意。

这是一个简单的例子 - 像这样显示popover：

// We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');

#my-popover {
    left: -169px!important;
}
#my-popover .arrow {
    left: 90%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<button id="my-button" data-toggle="popover">My Button</button>

Answer 4

我创建了一个jQuery插件，提供了4个附加位置：topLeft，topRight，bottomLeft，bottomRight

您只需包含缩小的js或未缩小的js，并在同一文件夹中包含匹配的css（minified vs unminified）。

https://github.com/dkleehammer/bootstrap-popover-extra-placements

Answer 5

Popover's Viewport (Bootstrap v3)

在所有场合都适用的最佳解决方案，特别是如果您的网站具有流畅的宽度，则使用Bootstrap Popover的视口选项。

这将使弹出窗口在您指定的选择器内占据宽度。因此，如果触发按钮位于该容器的右侧，则当弹出框位于该区域内时，引导箭头也将出现在右侧。见jsfiddle.net

如果您想从容器边缘获得一些空间，也可以使用填充。如果你不想填充，只需使用视口：'。enctainer'

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

在以下html示例中：

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

和CSS：

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}

Popover's Boundary (Bootstrap v4)

与viewport类似，在Bootstrap版本4中，popover引入了新的选项边界

https://getbootstrap.com/docs/4.1/components/popovers/#options

Answer 6

我通过向bootstrap css库添加一些代码来解决这个问题（部分）。您将不得不修改tooltip.js，tooltip.less，popover.js和popover.less

在tooltip.js中，在switch语句中添加这种情况

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

在tooltip.less中，在.tooltip {}中添加这两行

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

在popover.js和popover.less中也这样做。基本上，无论您在哪里找到提及其他位置的代码，都要相应地添加您想要的位置。

正如我前面提到的，这部分地解决了这个问题。我现在的问题是弹出窗口的小箭头没有出现。

注意：如果您想在左上角设置弹出窗口，请使用“.top”的top属性和“.left”的左侧属性

Answer 7

要引导3.0.0：

.popover{ right:0!important; }

并修改

.popover { max-width:WWWpx!important; } 

其中WWW是您正确的最大宽度，以显示您的弹出窗口内容。

Answer 8

我不得不对弹出窗口进行以下更改，并在下方放置一些重叠并正确显示箭头。

JS

case 'bottom-right':  
    tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
    break  

CSS

    .popover.bottom-right .arrow {  
      left: 20px; /* MODIFIED */  
      margin-left: -11px;  
      border-top-width: 0;  
      border-bottom-color: #999;  
      border-bottom-color: rgba(0, 0, 0, 0.25);  
      top: -11px;  
    }  
    .popover.bottom-right .arrow:after {  
      top: 1px;  
      margin-left: -10px;  
      border-top-width: 0;  
      border-bottom-color: #ffffff;  
    }  

这可以扩展到其他地方的箭头位置..享受！

Answer 9

你当然可以。幸运的是，有一种干净的方法可以做到这一点，它也在Bootstrap popover / tooltip文档中。

let mySpecialTooltip = $('#mySpecialTooltip); 
mySpecialTooltip.tooltip({
 container: 'body',
 placement: 'bottom',
 html: true,
 template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
}); 

在你的css文件中： -

.your-custom-class {
 bottom: your value;
}

确保在bootstrap的工具提示文档中添加模板，并使用css添加自定义类名称并设置样式

而且，就是这样。你可以在https://getbootstrap.com/docs/4.0/components/tooltips/上找到更多相关信息

Answer 10

也许你不需要这种逻辑来表示响应行为。

EG

placement: 'auto left'

Bootstrap 3具有自动放置值。 Bootstrap doc：

指定“auto”时，它将动态重新定向工具提示。例如，如果展示位置为“自动离开”，则工具提示会尽可能显示在左侧，否则会显示正确。