在视口内保持bootstrap popover

我正在尝试使用带有按钮的侧栏创建菜单，每个按钮都包含一个包含相关数据的指定弹出框。 不幸的是，其中一个弹出窗口可能包含任意数量的行，在某些情况下，它可能部分位于视口之外。

有关问题的示例，请参阅http://jsfiddle.net/bfd9f/1/ （单击“任务”按钮）

我认为我可以以编程方式将popover的顶部更改为已定义的值，当为负时（即在视口之外）并且为此，我已经设法在收听show.bs.popover同时获得对show.bs.popover的第一个div的show.bs.popover事件。 不幸的是，我认为由于它还没有渲染，它的大小似乎是（23,107），而它应该是（300，xxx）和（0,0）的位置。

有没有办法解决这个问题？ 可能首先在屏幕外渲染popover来测量它？ 如果是的话，我该怎么做？

谢谢

Answer 1

修复了即将推出的Bootstrap v3.2.0我相信： http ： //jsfiddle.net/pkP77/1/

由https://github.com/twbs/bootstrap/pull/12328中介绍的新viewportfunction提供

Answer 2

您总是可以使用!important重写弹出框的top值!important这可能不是最好的长期计划，因为它可能会干扰未来的CSS更改

  .popover { width: 300px !important; top: 0px !important; } 

http://jsfiddle.net/smurphy/x9hnk/

更新：

离开你提到的事件似乎有效。

 $('.btn-popover').on('shown.bs.popover', function (event) { //Set timeout to wait for popup div to redraw(animation) setTimeout(function(){ if($('div.popover').css('top').charAt(0) === '-'){ $('div.popover').css('top', '0px'); var buttonTop = $(event.currentTarget).position().top; var buttonHeight = $(event.currentTarget).height(); $('.popover.left>.arrow').css('top', buttonTop + (buttonHeight/2)); } },100); }); 

http://jsfiddle.net/smurphy/e6YaY/2/

这会使箭头与按钮对齐。