Question

在点击链接之前，我使用Bootstrap 3个弹出广告来显示有关悬停链接的信息。

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

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

我正在努力使弹出窗口出现在弹出窗口的左上角（而不是现在正在做的中间左侧），并且弹出框的顶部与箭头一致，如果是有道理。

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

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

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

Answer 2

我建议使用展示位置方法而不是$('[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'; }, });事件。当显示元素时，这不会触发弹出跳转。

这是它的工作原理：

for i := 0 to Form1.ComponentCount - 1 do begin

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

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

Answer 4

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

@media (max-width:667px){ /* do something here */ } /*landscape view*/

@media (max-width:375px){ /* do something here */ } /*portrait view*/

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

Bootstrap 3 Popover箭头和框定位

5 个答案: