我正在使用Bootstrap 3 弹出框在单击链接之前显示有关悬停链接的信息。
目前它正在运行，但是，链接显示在页面顶部的下拉菜单中。
当第一个链接有很多关于它的信息时，弹出框的顶部消失在页面顶部，所以你看不到它的内容。
我正在尝试使弹出框箭头出现在弹出框的左上角（而不是它现在正在做的左中角）并且弹出框的顶部与箭头齐平，如果那样的话有道理。
$('.popOver').popover({
trigger: 'hover',
html: true
});
上面的工作正常，但我不相信任何弹出框选项能够帮助我。它是我需要更改的 CSS，但发布的内容相当广泛，所以我只是在寻找具有引导知识的人来为我指明正确的方向。
【问题讨论】：
标签： javascript jquery css twitter-bootstrap-3 popover
我建议使用放置方法而不是shown.bs.popover 事件。
这不会在显示元素时触发弹出框跳转。
这就是它的工作原理：
$('[data-toggle=popover]').popover({
placement: function(context, source) {
var self = this;
setTimeout(function() {
self.$arrow.css('top', 55);
self.$tip.css('top', -45);
}, 0);
return 'right';
},
});
【讨论】：
上面的弹出框有问题，所以我看不到它。这为我解决了问题
// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
var arrow_position = parseInt($(this).position().top);
$('.popover').css('top', 10 + 'px');
$('.popover .arrow').css('top', arrow_position + 'px');
}
【讨论】：
我的用例是弹出框位置是top，我必须删除箭头。
我在使用 bootstrap 3.2.0 时遵循了@Skelly 提供的解决方案。
一个问题是，作为css属性top的popover flash在shown.bs.popover中更新了。
实际上，您可以在初始化弹出框时覆盖template 属性并向其添加一些margin-top（如果放置是左/右，则为margin-left）。
$('[data-toggle=popover]').popover({
placement: 'top',
template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
【讨论】：
它将为你的箭头提供准确的位置
$(el).on('shown.bs.popover', function () {
var position = parseInt($('.popover').position().top);
var pos2 = parseInt($(el).position().top) - 5;
var x = pos2 - position + 5;
if (popoverheight < x)
x = popoverheight;
$('.popover.left .arrow').css('top', x + 'px');
});
【讨论】：
一旦显示弹出框，您可以自定义弹出框的位置，或者我操纵.popover CSS 的箭头。
例如，这会将弹出框的顶部向下推 22 像素..
$('[data-toggle=popover]').on('shown.bs.popover', function () {
$('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})
【讨论】：
.popover:$('[data-toggle="popover"]').on('shown.bs.popover', function () { $(this).next().css('top',parseInt($(this).next().css('top')) + 22 + 'px'); });