我已经远远地搜索了互联网，虽然我发现这个堆栈溢出帖子很有洞察力Is it possible to change the position of Bootstrap popovers based on screen width?，但它仍然没有回答我的问题，可能是因为我理解位置/偏移的麻烦。
这就是我想要做的。我希望Twitter Bootstap Popover位置正确，除非热点popover将定位在视口之外，然后我希望它定位为LEFT。我正在制作一个有热点的iPad网络应用程序，当你按下热点时，会出现信息，但是当水平滚动被锁定时我不希望它出现在视口之外。
我认为它会像这样：
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: wheretoplace
});
function wheretoplace(){
var myLeft = $(this).offset.left;
if (myLeft<500) return 'left';
return 'right';
}
思考？谢谢！
答案 0 :(得分：174)
我刚注意到展示位置选项可以是字符串，也可以是函数返回字符串，每次单击时都会进行计算在一个可以弹出的链接上。
这使得在没有初始 $。每个功能的情况下复制您所做的事情变得非常容易：
var options = {
placement: function (context, source) {
var position = $(source).position();
if (position.left > 515) {
return "left";
}
if (position.left < 515) {
return "right";
}
if (position.top < 110){
return "bottom";
}
return "top";
}
, trigger: "click"
};
$(".infopoint").popover(options);
答案 1 :(得分：31)
根据文档，您应该可以将auto与首选展示位置结合使用，例如auto left
http://getbootstrap.com/javascript/#popovers：“当指定”auto“时，它会动态重定向弹出框。例如，如果展示位置为”自动离开“，则工具提示会尽可能显示在左侧，否则会显示正确。“
我试图做同样的事情然后意识到这个功能已经存在。
答案 2 :(得分：30)
对于Bootstrap 3，有
placement: 'auto right'
这更容易。默认情况下，它是正确的，但如果元素位于屏幕的右侧，则弹出窗口将被保留。所以它应该是：
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: 'auto right'
});
答案 3 :(得分：5)
所以我想出了一种有效地做到这一点的方法。对于我的特定项目，我正在建立一个iPad网站，所以我确切地知道像素X / Y值到达屏幕边缘的是什么。你的thisX和thisY值会有所不同。
由于无论如何都是通过内联样式放置弹出窗口，我只需抓住每个链接的左侧和顶部值来确定弹出窗口的方向。这是通过附加.popover（）在执行时使用的html5数据值来完成的。
if ($('.infopoint').length>0){
$('.infopoint').each(function(){
var thisX = $(this).css('left').replace('px','');
var thisY = $(this).css('top').replace('px','');
if (thisX > 515)
$(this).attr('data-placement','left');
if (thisX < 515)
$(this).attr('data-placement','right');
if (thisY > 480)
$(this).attr('data-placement','top');
if (thisY < 110)
$(this).attr('data-placement','bottom');
});
$('.infopoint').popover({
trigger:'hover',
animation: false,
html: true
});
}
欢迎任何评论/改进，但如果您愿意手动设置值，则可以完成工作。
答案 4 :(得分：1)
bchhun的回答让我走上正轨，但我想检查源和视口边缘之间的实际可用空间。如果没有足够的空间，我还希望将数据放置属性视为具有适当回退的首选项。这种方式“正确”总是正确的，除非没有足够的空间让popover显示在右侧，例如。这就是我处理它的方式。它对我有用，但感觉有点麻烦。如果有人对更清洁，更简洁的解决方案有任何想法，我有兴趣看到它。
var options = {
placement: function (context, source) {
var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;
$win = $(window);
$source = $(source);
placement = $source.attr('data-placement');
popoverWidth = 400;
popoverHeight = 110;
offset = $source.offset();
// Check for horizontal positioning and try to use it.
if (placement.match(/^right|left$/)) {
winWidth = $win.width();
toRight = winWidth - offset.left - source.offsetWidth;
toLeft = offset.left;
if (placement === 'left') {
if (toLeft > popoverWidth) {
return 'left';
}
else if (toRight > popoverWidth) {
return 'right';
}
}
else {
if (toRight > popoverWidth) {
return 'right';
}
else if (toLeft > popoverWidth) {
return 'left';
}
}
}
// Handle vertical positioning.
scrollTop = $win.scrollTop();
if (placement === 'bottom') {
if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
return 'bottom';
}
return 'top';
}
else {
if (offset.top - scrollTop > popoverHeight) {
return 'top';
}
return 'bottom';
}
},
trigger: 'click'
};
$('.infopoint').popover(options);
答案 5 :(得分：1)
你也可以尝试这个，
==＆GT;在视口中获取目标/源位置
==＆GT;检查底部的空间是否小于工具提示高度
==＆GT;如果底部的空间小于工具提示高度，则只需向上滚动
placement: function(context, source){
//get target/source position in viewport
var bounds = $(source)[0].getBoundingClientRect();
winHeight = $(window).height();
//check wheather space from bottom is less that your tooltip height
var rBottom = winHeight - bounds.bottom;
//Consider 180 == your Tooltip height
//if space from bottom is less that your tooltip height, this will scrolls page up
//We are keeping tooltip position is fixed(at bottom)
if (rBottom < 180){
$('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
}
return "bottom";
}
答案 6 :(得分：0)
您可以在数据放置中使用自动，例如data-placement =“auto left”。它会根据您的屏幕尺寸自动调整，默认位置将会保留。
答案 7 :(得分：0)
除了bchhun的好答案，如果你想要absoulte定位，你可以这样做
var options = {
placement: function (context, source) {
setTimeout(function () {
$(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
},0)
return "top";
},
trigger: "click"
};
$(".infopoint").popover(options);
答案 8 :(得分：0)
我在AngularJS中解决了我的问题如下：
var configPopOver = {
animation: 500,
container: 'body',
placement: function (context, source) {
var elBounding = source.getBoundingClientRect();
var pageWidth = angular.element('body')[0].clientWidth
var pageHeith = angular.element('body')[0].clientHeith
if (elBounding.left > (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
return "left";
}
if (elBounding.left < (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
return "right";
}
if (elBounding.top < 110){
return "bottom";
}
return "top";
},
html: true
};
此函数根据元素位置将Bootstrap popover float的位置置于最佳位置。
答案 9 :(得分：0)
$scope.popoverPostion = function(event){
$scope.pos = '';
if(event.x <= 207 && event.x >= 140){
$scope.pos = 'top';
event.x = '';
}
else if(event.x < 140){
$scope.pos = 'top-left';
event.x = '';
}
else if(event.x > 207){
$scope.pos = 'top-right';
event.x = '';
}
};
答案 10 :(得分：-2)
如果你在页面的几乎所有地方都需要它，你也可以试试这个。
你可以用一般方式配置它然后只使用它。
这样你也可以使用HTML元素和你想要的任何东西：）
$(document).ready(function()
{
var options =
{
placement: function (context, source)
{
var position = $(source).position();
var content_width = 515; //Can be found from a JS function for more dynamic output
var content_height = 110; //Can be found from a JS function for more dynamic output
if (position.left > content_width)
{
return "left";
}
if (position.left < content_width)
{
return "right";
}
if (position.top < content_height)
{
return "bottom";
}
return "top";
}
, trigger: "hover"
, animation: "true"
, html:"true"
};
$('[data-toggle="popover"]').popover(options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h3>Popover Example</h3>
<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>
要设置更多选项，您可以转到here。
可以找到更多 here 。
如果您想在点击后弹出窗口，您可以将JS选项更改为trigger: "click"，如下所示 -
return ..;
}
......
, trigger: "click"
......
};
U也可以在HTML中定制{a} data-trigger="click" -
<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>
我认为这将是更加面向代码，更易于使用，对所有人更有帮助:)。