bootstrap popover：高级定位
我试图find位于960像素宽的网页最右上angular的触发器的twitter-bootstrappopup窗口。 理想情况下，我将它放在底部，并用CSS移动箭头（所以箭头位于popup窗口的右上angular）。
不幸的是，'放置'：'底部'的定位是不够的，因为它会将其置于触发器下方。
我正在寻找解决scheme，将静态放置在触发器的左侧和下方。 我读了很多的问题，但找不到任何。
提示？
这工作。 testing。
.popover { top: 71px !important; left: 379px !important; } 简单的解决scheme
只需添加一个属性给你的popover好友！
小提琴
如果你急着看我的小提琴
主要目标
我们想添加一个ID或一个类到一个特定的popover，以便我们可以按照我们想要的方式通过CSS来定制它。
请注意，我们不想定制所有的popup窗口！ 这是可怕的想法（基本上，截至今天，接受的答案是一个可怕的想法..）
例
这里是一个简单的例子 – 像这样显示popover：
HTML：
<button id="my-button" data-toggle="popover">My Button</button>
JS：
// We add the id 'my-popover' $("#my-button").popover({ html : true, placement: 'bottom' }).data('bs.popover').tip().attr('id', 'my-popover');
CSS：
#my-popover { left: -169px!important; } #my-popover .arrow { left: 90% }
我创build了一个jQuery插件，提供了4个附加的展示位置：topLeft，topRight，bottomLeft，bottomRight
你只需要包括缩小的js或者未定义的js，并且在同一个文件夹中有匹配的css（缩小vs未缩小）。
https://github.com/dkleehammer/bootstrap-popover-extra-placements
我解决了这个（部分）通过添加一些代码到引导CSS库。 你将不得不修改tooltip.js，tooltip.less，popover.js和popover.less
在tooltip.js中，在switch语句中添加这个case
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中做同样的事情。 基本上，无论你在哪里find提及其他职位的代码，都要相应地添加你想要的职位。
正如我前面提到的，这部分解决了问题。 我现在的问题是，popover的小箭头没有出现。
注意：如果你想在左上angular有popup窗口，使用'.top'的top属性和'.left'属性，
为了引导3.0.0：
.popover{ right:0!important; }
并修改
.popover { max-width:WWWpx!important; }
WWW是你正确的最大宽度来显示你的popover内容。
我不得不做出以下更改，使popup窗口位于下方，并重叠显示正确的箭头。
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; }
这可以扩展到其他地方的箭头位置..享受！
最好的解决scheme，将在所有时间，尤其是如果您的网站有一个stream畅的宽度，为您工作的是使用Bootstrap Popover的视口选项。
这将使popup窗口在你已经分配的select器内部取得宽度。 因此，如果触发器button位于该容器的右侧，则popup窗口在该区域内时，引导箭头也将出现在右侧。
$('#popoverButton').popover({ container: 'body', placement: "bottom", html: true, viewport: ".container" });
在下面的html例子中：
<div class="container"> <button type="button" id="popoverButton">Click Me!</button> </div>
和CSS：
.container { text-align:right; width: 100px; padding: 20px; }
也许你不需要这个逻辑来进行响应行为。
例如
placement: 'auto left'
Bootstrap 3具有自动 放置的值。 Bootstrap文档 ：
当指定“auto”时，它将dynamic调整工具提示的方向。 例如，如果放置是“自动离开”，则工具提示将尽可能显示在左侧，否则将显示正确。
如果你看看bootstrap源代码 ，你会注意到可以使用margin来修改位置。
所以，首先你应该改变popover模板来添加自己的css类，以免与其他popovers冲突：
$(".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你可以轻松地移动popup窗口的位置：
.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 */ }
这个解决scheme不会影响你有其他的东西。 同样的解决scheme也可以在工具提示上使用，因为popover类从tooltip类inheritance。
这是一个简单的jsFiddle
