bootstrap popover:高级定位

Question

我正在尝试为一个触发器定位一个twitter-bootstrap popover,该触发器位于960px宽网页的最右上角.理想情况下,我将它放在底部并用CSS移动箭头(因此箭头位于弹出窗口的右上角).

不幸的是,"放置":"底部"定位是不够的,因为它会将其置于触发器下方.

我正在寻找能够将弹出窗口静态放置在触发器左下方的解决方案.我读了很多问题,却找不到任何问题.

提示？

Answer 1

这有效.测试.

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

Answer 2

简单的解决方案

只需为您的popover好友添加一个属性!

小提琴

如果你赶时间,请看我的小提琴

主要目标

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

请注意,我们不想自定义所有弹出窗口!这是一个可怕的想法(基本上,截至今天,接受的答案是一个可怕的想法..)

例

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

HTML:

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

JS:

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

CSS:

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

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"的左侧属性