Bootstrap Popover箭头和框定位

在单击链接之前，我使用Bootstrap popovers显示有关hover链接的信息。 它目前正在工作，但是，链接显示在页面顶部的下拉菜单中。 当第一个链接有很多关于它的信息时，弹出窗口的顶部会消失在页面顶部，因此您无法看到它的内容。 我试图让弹出箭头出现在弹出窗口的左上角（而不是现在正在做的中左），如果有意义的话，弹出框的顶部与箭头齐平。

$('.popOver').popover({ trigger: 'hover', html: true }); 

以上这个工作正常，但我不相信任何popover选项能够在这里帮助我。 它是我需要改变的CSS，但它相当广泛的发布，所以我只是寻找一个有自助知识的人指出我正确的方向。
谢谢。

Answer 1

一旦显示弹出.popover您可以自定义弹出窗口的位置或箭头我操作.popover CSS。

例如，这会将popover的顶部向下推22像素。

 $('[data-toggle=popover]').on('shown.bs.popover', function () { $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px') }) 

工作演示 ： http ： //bootply.com/88325

Answer 2

我建议使用placement方法而不是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'; }, }); 

Answer 3

我的用例是弹出窗口位置是top ，我必须删除箭头。

当我使用bootstrap 3.2.0时，我遵循了@Skelly提供的解决方案。 一个问题是在shown.bs.popover更新了作为css属性top的shown.bs.popover 。

实际上，您可以在初始化弹出窗口时覆盖template属性，并向其添加一些margin-top （如果放置左/右，则为margin-left ）。

 $('[data-toggle=popover]').popover({ placement: 'top', template: '
' }); 

演示： http ： //www.bootply.com/gWwmO5XdbL

Answer 4

它将为你的箭头提供准确的位置

  $(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'); }); 

Answer 5

我遇到了上面的弹出窗口的问题，所以我看不到它。 这为我修好了

 // 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'); }