Bootstrap Popover箭头和框定位

Question

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

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

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

Answer 1

您可以自定义弹出窗口的位置,或者在显示弹出窗口时操纵.popoverCSS 的箭头.

例如,这会将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';
  },
});