14

在单击链接之前，我正在使用Bootstrap 3弹出框显示有关悬停链接的信息。

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

当第一个链接有很多关于它的信息时，弹出框的顶部会消失在页面的顶部，所以你看不到它的内容。

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

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

以上工作正常，但我不相信任何弹出选项能够帮助我。它是我需要更改的 CSS，但发布的内容相当广泛，所以我只是在寻找具有引导知识的人来为我指明正确的方向。

4

5 回答 5

26

您可以自定义弹出框的位置，或者在.popover显示弹出框后操作 CSS 的箭头。

例如，这会将弹出框的顶部向下推 22 个像素。

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

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

于 2013-10-17T14:37:11.307 回答
6

我建议使用放置方法而不是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';
  },
});
于 2016-07-11T14:56:53.867 回答
2

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

我在使用引导程序 3.2.0 时遵循了@Skelly 提供的解决方案。一个问题是作为 css 属性的 popover flashtop在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>'
});

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

于 2015-05-22T03:10:33.590 回答
0

我在上面的弹出窗口有问题，所以我看不到它。这为我解决了

// 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');
}
于 2017-01-17T02:21:00.353 回答
-1

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

 $(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');
    });
于 2015-02-24T12:27:09.877 回答