Bootstrap 3 Popover箭头和框定位

Question

在点击链接之前，我使用Bootstrap 3 popovers显示有关悬停链接的信息。

它目前正在工作，但是，链接显示在页面顶部的下拉菜单中。

当第一个链接有很多关于它的信息时，弹出窗口的顶部会消失在页面顶部，因此您无法看到它的内容。

我试图使弹出窗口出现在弹出窗口的左上角（而不是现在正在做的中左），如果有意义的话，弹出框的顶部与箭头齐平。

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

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

Answer 1

一旦显示弹出窗口，您可以自定义弹出框的位置或箭头我操纵.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

我建议使用放置方法而不是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提供的解决方案。一个问题是，在top中更新了css属性shown.bs.popover的popover flash。

实际上，您可以在初始化弹出窗口时覆盖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>'
});

但是：Kua zxsw指出

Answer 4

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

http://www.bootply.com/gWwmO5XdbL

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