在視口內保持bootstrap popover

Question

我正在嘗試使用帶有按鈕的側欄創建菜單，每個按鈕都包含一個包含相關數據的指定彈出框。 不幸的是，其中一個彈出窗口可能包含任意數量的行，在某些情況下，它可能部分位於視口之外。

有關問題的示例，請參閱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中介紹的新viewport功能提供

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/

這會使箭頭與按鈕對齊。