PopOver 自动调整位置
PopOver auto adjust placement
我遇到了 PopOver 问题。我想让它在所有位置自动调整。如果在右侧未找到 space,则会在左侧打开。但我希望它对 top/bottom 做同样的事情。即如果它在顶部找不到 space 它应该在底部打开,反之亦然。有没有什么办法可以做到各方面都做到?
$('[data-toggle="popover"]').popover({
trigger: 'manual',
placement: 'auto right'
})
HTML
<a data-toggle="popover" class="hlpicon" data-html="true" data-trigger="hover" data-container="body" data-content="This will open a popover" data-original-title="" title=""></a>
您应该能够将 placement
选项用作 字符串 或 返回字符串 的函数:
$('[data-toggle="popover"]').popover({
trigger: 'manual',
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";
}
});
就上下文而言,此代码的来源是 Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?(声明不需要署名 - 只需将其添加为资源)。
选择的解决方案是一个好的开始,但对我来说还不够。我不得不用 $(source).offset().top - $(window).scrollTop()
替换 position.top
这是我的工作解决方案
$('[data-toggle="popover"]').popover({
[...]
placement: function (context, source) {
if ($(source).offset().top - $(window).scrollTop() < 280) {
return "bottom";
}
return "top";
}
}).popover('show');
我遇到了 PopOver 问题。我想让它在所有位置自动调整。如果在右侧未找到 space,则会在左侧打开。但我希望它对 top/bottom 做同样的事情。即如果它在顶部找不到 space 它应该在底部打开,反之亦然。有没有什么办法可以做到各方面都做到?
$('[data-toggle="popover"]').popover({
trigger: 'manual',
placement: 'auto right'
})
HTML
<a data-toggle="popover" class="hlpicon" data-html="true" data-trigger="hover" data-container="body" data-content="This will open a popover" data-original-title="" title=""></a>
您应该能够将 placement
选项用作 字符串 或 返回字符串 的函数:
$('[data-toggle="popover"]').popover({
trigger: 'manual',
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";
}
});
就上下文而言,此代码的来源是 Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?(声明不需要署名 - 只需将其添加为资源)。
选择的解决方案是一个好的开始,但对我来说还不够。我不得不用 $(source).offset().top - $(window).scrollTop()
position.top
这是我的工作解决方案
$('[data-toggle="popover"]').popover({
[...]
placement: function (context, source) {
if ($(source).offset().top - $(window).scrollTop() < 280) {
return "bottom";
}
return "top";
}
}).popover('show');