如何定位 Bootstrap 弹出框？

Posted 2023-02-22

【中文标题】如何定位 Bootstrap 弹出框？

【英文标题】：How to position a Bootstrap popover?

【发布时间】：2012-06-03 14:29:19

【问题描述】：

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

理想情况下，我会将其放置在底部并使用 CSS 移动箭头（因此箭头位于弹出框的右上角）。不幸的是，'placement':'bottom' 定位是不够的，因为它会在触发器下方居中。

我正在寻找将弹出框静态放置在触发器的下方和左侧的解决方案。

【问题讨论】：

使用示例代码更好地阐明您的问题会很有帮助，也许还有一张图片代表您希望弹出框相对于触发器的位置。

我也在寻找对弹出框元素的更好控制。还没有找到任何东西。

【参考方案1】：

这行得通。经过测试。

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

【讨论】：

这不是解决方案，因为页面上可能有很多弹出窗口。

那么你需要做的就是改变你的选择器

这是一个很棒的解决方案 - 您在尺寸和位置是动态的弹出框中硬编码位置值。我刚刚尝试在 getbootstrap.com/javascript/#popovers 的开发工具中添加该样式，不出所料，它不起作用。

我喜欢我们可以使用 jquery 设置样式，并且在我的情况下可以正常工作，我在选择器中添加了更多内容以缩小选择范围

下面的一张海报实际上给出了可能应该被接受的答案。他呼吁viewport 是如何正确定位它。这允许容器绑定到约束，而无需手动覆盖位置（尤其是固定/设置位置）

【参考方案2】：

只需向您的弹出框添加一个属性！如果您赶时间，请参阅my 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>

【参考方案3】：

我创建了一个 jQuery 插件，它提供了 4 个额外的展示位置： 左上、右上、左下、右下

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

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

【讨论】：

您的插件会破坏 MVVM 库，例如淘汰赛，因为它会将元素与主体分离

@Pantera61 ：我应该破解代码的哪一部分来检测 2 个弹出框之间的碰撞？即当 2 个附近的弹出框部分重叠时，我想动态更改它们的位置以彼此远离。

【参考方案4】：

Popover 的视口（Bootstrap v3）

在所有情况下都适合您的最佳解决方案是使用 Bootstrap Popover 的 viewport 选项，尤其是在您的网站具有可变宽度的情况下。

这将使弹出框在您指定的选择器内占据宽度。因此，如果触发按钮位于该容器的右侧，则当弹出框位于该区域内时，引导箭头也会出现在右侧。 见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;

Popover 的边界（Bootstrap v4）

与视口类似，在 Bootstrap 版本 4 中，popover 引入了新选项 boundary

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

【讨论】：

这绝对是最好的答案。设置viewport 是解决这个问题的关键。额外的css是个人喜好

你知道如何使用上面的代码在引导弹出窗口中将工具提示向左或向右移动，如果可以，请分享一个 js fiddle

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

V4 中移除了视口选项

我想将此视口参数添加为数据视口属性，但它不起作用。它抛出此错误：错误：语法错误，无法识别的表达式：selector：'.container'，填充：6

【参考方案5】：

我通过向引导 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 中做同样的事情。基本上，无论您在哪里找到提到其他位置的代码，都相应地添加您想要的位置。

正如我之前提到的，这部分解决了问题。我现在的问题是弹出框的小箭头没有出现。

注意：如果你想让popover在左上角，使用'.top'的top属性和'.left'的left属性

【参考方案6】：

引导 3.0.0：

.popover right:0!important; 

也要修改

.popover  max-width:WWWpx!important;  

WWW 是显示弹出框内容的正确最大宽度。

【讨论】：

我认为这通常不起作用，因为弹出框不是触发器元素的子元素。只有当触发元素位于相对定位容器的右侧时，它才会起作用。

【参考方案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;  
      

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

【讨论】：

箭头很小——几乎看不到。我怎样才能让它变大？

【参考方案8】：

如果你看一下bootstrap source codes，你会注意到可以使用保证金来修改仓位。

所以，首先你应该更改弹出框模板以添加自己的 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.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 类继承自工具提示类。

Here's a simple jsFiddle

【参考方案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/ 上找到更多相关信息

【参考方案10】：

也许您不需要此逻辑来实现响应式行为。

例如

placement: 'auto left'

Bootstrap 3 对 placement 具有 auto 值。 Bootstrap doc:

当指定“auto”时，它会动态地重新定位工具提示。例如，如果放置是“自动向左”，则工具提示将尽可能向左显示，否则将向右显示。