如何定位Bootstrap的弹出框？

Question

我正在尝试为一个位于960像素宽网页的远右上角的触发器定位Bootstrap弹出式气泡。

理想情况下，我希望将气泡定位在底部，并用CSS移动箭头（使箭头位于气泡的右上角）。不幸的是，“placement”：“bottom”定位还不够，因为它会将气泡居中放置在触发器下方。

我正在寻找解决方案，可以将气泡静态地放置在触发器下面和左侧。

- koichirose

---

提供示例代码和可能代表您希望弹出窗口相对于触发器定位的图像，将有助于更好地澄清您的问题。 - Josh Metcalfe

我也在寻找更好的弹出元素控制方式。目前还没有找到合适的。 - Dustin Graham

Answer 1

这个可以用。已测试。

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

- rboarman

---

这不是解决方案，因为页面上可能会有很多弹出框。 - Rootical V.

然后你所需要做的就是改变你的选择器。 - rboarman

这个解决方案很糟糕——你在一个尺寸和位置都是动态的弹出框中硬编码了位置值。我刚刚在 http://getbootstrap.com/javascript/#popovers 上使用开发者工具添加了这个样式，不出所料，它没有起作用。 - jbyrd

我喜欢我们可以使用jQuery设置样式，并且在我的情况下运行得非常好，我只是添加了更多选择器来缩小选择范围。 - CMS

下面的一位海报实际上提供了应该被接受的答案。他指出viewport是如何正确定位的。这允许容器绑定到约束，而无需手动覆盖位置（特别是固定/设置位置）。 - Jonathon Hibbard

对于那些尝试这个的人，还有一件事情要注意：如果不将data-boundary="window"添加到弹出框元素中，重新定位将受到元素尺寸的限制。 - Majte

Answer 2

只需向您的弹出窗口添加属性即可！如果您在赶时间，请参阅我的JSFiddle。

我们希望为特定的弹出窗口添加ID或类，以便我们可以通过CSS自定义它们。

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

以下是一个简单的示例-显示弹出窗口如下：

// 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>

- Mick

Answer 3

我创建了一个jQuery插件，提供了4个额外的位置：topLeft、topRight、bottomLeft和bottomRight。

只需包含压缩或未压缩的js文件，并在同一文件夹中具有匹配的css文件（压缩与未压缩）。

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

- dkleehammer

---

您的插件破坏了MVVM库，例如knockout，因为它将元素从页面中分离。 - Anders

@Pantera61：我应该修改代码的哪一部分来检测两个弹出窗口之间的碰撞？即当两个相邻的弹出窗口部分重叠时，我想动态地改变它们的位置以避免彼此重叠。 - user

Answer 4

Bootstrap v3中弹出框视口

最好的解决方案是使用Bootstrap Popover的viewport选项，这将适用于所有情况，特别是如果您的网站具有流体宽度。

这将使弹出框在您分配的选择器内占据宽度。因此，如果触发按钮位于容器的右侧，则Bootstrap箭头也将出现在右侧，而弹出框位于该区域内。 请参见jsfiddle.net

如果您想要与容器边缘保持一些空间，也可以使用padding。 如果不需要填充，请使用viewport:'.container'

$('#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;
}

气泡提示的边界（Bootstrap v4）

与视口类似，在Bootstrap 4版本中，气泡弹出框引入了新选项boundary

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

- Datsos

---

这绝对是最好的答案。设置viewport是解决此问题的关键。附加的 CSS 是个人偏好。 - Jonathon Hibbard

你知道如何使用上述代码将工具提示移动到 Bootstrap 弹出框的左侧或右侧吗？如果知道，能否请分享一个 JSFiddle？ - agent47

这取决于您用于视口的容器选择器。在上面的示例中，如果您从.container中删除text-align: right，那么工具提示将具有另一个方向。 - Datsos

V4中已删除viewport选项。 - Batman

我想将这个viewport参数作为data-viewport属性添加，但它不起作用。它会抛出以下错误：Error: Syntax error, unrecognized expression: {selector: '.container', padding: 6} - Zoltán Süle

Answer 5

我解决了这个问题（部分地），通过在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”的顶部属性和“.left”的左侧属性。

- khaled

Answer 6

引导bootstrap 3.0.0：

.popover{ right:0!important; }

并且也要修改

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

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

- manufosela

---

我认为这通常不起作用，因为弹出窗口不是触发元素的子元素。只有在触发元素位于相对定位容器的右侧时才有效。 - mahemoff

Answer 7

我需要对弹出框进行以下更改，使它在下方有一定的重叠，并且正确显示箭头。

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;  
    }  

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

- siruscoder

---

箭头太小了 - 几乎不可见。我该如何使它变大？ - Michael Galaxy

Answer 8

如果您查看bootstrap源代码，您会注意到可以使用margin来修改位置。

因此，首先应更改弹出窗口模板，添加自己的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 */
}

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

这里有一个简单的jsFiddle

- Buksy

Answer 9

当然可以。幸运的是，Bootstrap弹出框/工具提示文档中也有一种干净的方法来实现此目的。

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/ 上了解更多信息。

- Nadun Malinda

Answer 10

也许你不需要这个逻辑来实现响应式行为。

例如：

placement: 'auto left'

Bootstrap 3中placement属性有一个auto值。Bootstrap文档：

当指定为"auto"时，它将动态重新定位工具提示。例如，如果placement是"auto left"，则工具提示将在可能的情况下显示在左侧，否则将显示在右侧。

- Horacio Alexandre Fernandes