keep bootstrap popover inside viewport

Question

Próbuję utworzyć menu za pomocą paska bocznego z przyciskami, każdy z przypisanym popover zawierającym odpowiednie dane. Niestety, jeden z poparek może zawierać dowolną liczbę wierszy, aw niektórych przypadkach może być częściowo poza rzutnią.

Zobacz http://jsfiddle.net/bfd9f/1/ na przykład emisji (kliknij przycisk „Zadania”)

Myślałem, że mogę programowo zmienić popover Top do określonej wartości, gdy ujemna (tj poza rzutnia) i aby to zrobić , Udało mi się już uzyskać odniesienie do pierwszego div popover podczas słuchania zdarzenia show.bs.popover. Niestety, myślę, że ze względu na to, że nie jest on jeszcze renderowany, wydaje się mieć rozmiar (23, 107), podczas gdy powinien być podobny (300, xxx) i pozycja (0, 0).

Czy istnieje sposób rozwiązania tego problemu? może renderowanie popover'u najpierw na ekranie, żeby je zmierzyć? jeśli tak, to jak mam to zrobić?

Dzięki

Answer 1

Poprawiono w nadchodzącym Bootstrap v3.2.0 wierzę: http://jsfiddle.net/pkP77/1/

Dzięki uprzejmości nowego viewport funkcja wprowadzona w https://github.com/twbs/bootstrap/pull/12328

Answer 2

Można zawsze zastępują wartości top z popover wykorzystaniem !important To może nie być najlepszy plan długoterminowy, ponieważ może to kolidować z przyszłymi CSS zmienia

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

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

Aktualizacja:

Wyjeżdżasz z imprezy entioned to wydaje się działać.

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

To wyrównuje strzałkę ze swoim przycisk.