如何定位Bootstrap popover？

Question

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

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

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

Answer 1

这很有效。测试

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

Answer 2

只需在弹出框中添加一个属性即可！如果您赶时间，请参阅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 3

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

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

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

Answer 4

Popover的视口（Bootstrap v3）

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

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

如果您想从容器边缘留出一些空间，也可以使用填充。如果您不想填充，只需使用视口：＆＃39; .container＆＃39;

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

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

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

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'的top属性和'.left'的左属性

Answer 6

引导3.0.0：

.popover{ right:0!important; }

并修改

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

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

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

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

Answer 8

可以。幸运的是，有一种干净的方法可以做到这一点，并且它也在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 9

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

E.g。

placement: 'auto left'

Bootstrap 3的展示位置具有自动值。 Bootstrap doc：

  

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

Answer 10

如果您查看bootstrap source codes，您会发现可以使用保证金修改该位置。

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

$(".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类继承自工具提示类。

Here's a simple jsFiddle