Bootstrap 3弹出框箭头和框体定位

Question

我正在使用Bootstrap 3气泡弹出框，在悬停链接时显示链接相关信息，以便在点击链接之前进行查看。

目前它能够正常工作，但是这些链接是从页面顶部的一个下拉菜单中显示出来的。

当第一个链接有很多相关信息时，弹出框顶部会消失在页面顶部，导致无法查看内容。

我正在尝试让气泡弹出框箭头出现在顶部左侧（而不是现在的中间左侧），并且气泡弹出框顶部与箭头对齐。

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

这个上面的代码可以正常工作，但我不相信任何popover选项能够帮助我。我需要改变CSS，但是修改范围比较大，所以我只是在寻找一些了解bootstrap的人指点我方向。

- Shamrockonov

Answer 1

你可以通过在弹出窗口显示后操作 .popover CSS 来自定义弹出窗口或箭头的位置。例如，这将向下推动弹出窗口顶部 22 像素。

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

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

- Zim

---

@BeepDog，Bootstrap 3.0中的事件已经使用“bs”进行命名空间处理，请尝试监听“shown.popover”事件。 - stereoscott

这对我来说部分地起作用。当我点击输入时，弹出框会加载在顶部，几毫秒后它会向下移动。为什么？=( - brunodd

如果您正在使用默认容器设置，则应仅修改当前显示的弹出窗口，而不是每个.popover：
$('[data-toggle="popover"]').on('shown.bs.popover', function () { $(this).next().css('top',parseInt($(this).next().css('top')) + 22 + 'px'); }); - Titenis

没错，@RicardoGreen，因为这个问题是关于Bootstrap 3的。 - Carol Skelly

谢谢@Zim，不过你能帮我看一下这个问题的编辑建议吗？链接在这里：https://stackoverflow.com/review/suggested-edits/22460271 - Ricardo Green

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

- HaNdTriX

Answer 3

我的使用场景是，弹出框的位置是 top，而我需要去掉箭头。

我在使用bootstrap 3.2.0时，按照@Skelly提供的解决方案进行操作。一个问题是，在 shown.bs.popover 中更新 CSS 属性 top 时，弹出框会闪烁。

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

demo: http://www.bootply.com/gWwmO5XdbL

- Edward Fung

Answer 4

我遇到了弹出框在上方无法显示的问题。这个方法解决了我的问题。

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

- mikeytown2

Answer 5

它将为您的箭头提供确切的位置。

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

- Shubham Nigam

---

如何获取弹出框的高度？ - Jeson Martajaya