Bootstrap 3 Popover 箭头和框定位

Posted

技术标签:

【中文标题】Bootstrap 3 Popover 箭头和框定位【英文标题】:Bootstrap 3 Popover arrow and box positioning 【发布时间】:2013-10-26 00:14:39 【问题描述】:

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

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

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

我正在尝试使弹出框箭头出现在弹出框的左上角(而不是它现在正在做的左中角)并且弹出框的顶部与箭头齐平,如果那样的话有道理。

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

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

【问题讨论】:

【参考方案1】:

我建议使用放置方法而不是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';
  ,
);

【讨论】:

【参考方案2】:

上面的弹出框有问题,所以我看不到它。这为我解决了问题

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

【讨论】:

【参考方案3】:

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

我在使用 bootstrap 3.2.0 时遵循了@Skelly 提供的解决方案。 一个问题是,作为css属性top的popover flash在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

【讨论】:

【参考方案4】:

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

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

【讨论】:

如何获得popoverheight?【参考方案5】:

一旦显示弹出框,您可以自定义弹出框的位置,或者我操纵.popover CSS 的箭头。

例如,这会将弹出框的顶部向下推 22 像素..

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

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

【讨论】:

@BeepDog 3.0 中的 bootstap 事件使用 'bs' 命名,请尝试监听 'shown.popover' 这部分对我有用。当我单击输入时,弹出框会加载到顶部,几毫秒后它会向下移动。为什么? =( 如果您使用默认容器设置,您应该只修改当前显示的弹出框,而不是每个.popover:$('[data-toggle="popover"]').on('shown.bs.popover', function () $(this).next().css('top',parseInt($(this).next().css('top')) + 22 + 'px'); ); 没错@RicardoGreen,因为这个问题是针对 Bootstrap 3 的。 谢谢@Zim,无论如何你能帮我解决这个问题的编辑建议吗? ***.com/review/suggested-edits/22460271

以上是关于Bootstrap 3 Popover 箭头和框定位的主要内容,如果未能解决你的问题,请参考以下文章

popover带箭头弹框

使用 bootstrap 3 popover 内表未显示在按钮顶部

html 将表单放在popover中的bootstrap 3中

popover箭头方向无法确定

BootStrap笔记-popover的使用(popover中放验证码,点击更新)

如何删除 iPad 的 Popover 箭头及其边框