Bootstrap popover'ını viewport içinde saklayın

Question

Her biri ilgili verileri içeren atanmış bir popolu düğmelerle bir kenar çubuğu kullanarak bir menü oluşturmaya çalışıyorum. Ne yazık ki, popoverlerden biri rasgele sayıda satır içerebilir ve bazı durumlarda kısmen görünümün dışında olabilir.

ben programlı tanımlanmış bir değere popover en üst değiştirebilir düşünce

(click "Görevler" butonuna) konunun bir örnek için http://jsfiddle.net/bfd9f/1/ bakın ne zaman (görüntü alanı dışında yani) negatif ve bunu yapmak için Ben zaten show.bs.popover olay dinlerken popover ilk div bir referans almak başardı. Maalesef, henüz işlenmemiş olması nedeniyle, (300, xxx) ve (0, 0) pozisyonunda olması gereken bir boyutta (23, 107) olduğu görülüyor.

Bu sorunu çözmenin bir yolu var mı? Belki de bunu ölçmek için önce poponun ön camını açar mı? eğer öyleyse, bunu nasıl yapardım? Gelecekteki CSS ile müdahale edebileceğiniz gibi

Teşekkür

Answer 1

inanıyorum: http://jsfiddle.net/pkP77/1/

ben çoktan düşündüm .. ne yazık ki bütün popovers etkileyecek https://github.com/twbs/bootstrap/pull/12328

Answer 2

Hep

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

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

değiştirir Bu en iyi uzun vadeli bir plan olmayabilir !important kullanarak popover ait top değerini geçersiz kılabilir

Güncelleştirme:

Etkinliğinizden çıkmak için Bu girişmiş gibi görünüyor.

$('.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/

Bu düğmesiyle oku hizalar. Yaklaşan Bootstrap v3.2.0 giderilen