56

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

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

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

4

10 回答 10

34

这行得通。经测试。

.popover {
    top: 71px !important;
    left: 379px !important;
}
于 2012-09-18T23:03:52.373 回答
20

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

于 2015-09-15T01:22:51.877 回答
14

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

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

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

于 2013-03-13T21:34:20.567 回答
12

Popover 的视口 (Bootstrap v3)

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

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

如果您想从容器边缘留出一些空间，您也可以使用填充。如果你不想填充，只需使用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 引入了新的选项边界

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

于 2016-12-08T15:49:35.120 回答
7

我通过向引导 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'的left属性

于 2012-08-18T10:15:51.887 回答
4

引导 3.0.0：

.popover{ right:0!important; }

也修改

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

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

于 2013-08-26T09:30:09.697 回答
3

我必须对弹出框进行以下更改，使其位于下方并有一些重叠并正确显示箭头。

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

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

于 2013-01-22T21:11:05.140 回答
1

如果您查看引导程序源代码，您会注意到可以使用边距修改位置。

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

这是一个简单的jsFiddle

于 2016-05-06T07:09:51.843 回答
1

你当然可以。幸运的是，有一种干净的方法可以做到这一点，它也在 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/上找到更多相关信息

于 2018-12-20T03:40:22.677 回答
0

也许您不需要这种逻辑来进行响应行为。

例如

placement: 'auto left'

Bootstrap 3 具有放置的自动值。引导文档：

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

于 2015-08-18T22:37:32.520 回答