mantiene il popover del bootstrap all'interno della finestra

Question

Sto tentando di creare un menu utilizzando una barra laterale con pulsanti, ognuno con un popover assegnato contenente i dati rilevanti. Sfortunatamente, uno dei popover potrebbe contenere un numero arbitrario di righe e in alcuni casi potrebbe essere parzialmente fuori dalla finestra.

Vedere http://jsfiddle.net/bfd9f/1/ per un esempio del problema (fare clic sul pulsante "Tasks")

ho pensato che avrei potuto a livello di codice modificare la parte superiore del popover per un valore definito, quando negativo (cioè al di fuori della finestra) e per fare questo , Sono già riuscito a ottenere un riferimento al primo div del popover durante l'ascolto dell'evento show.bs.popover. Sfortunatamente, penso che a causa del fatto che non è ancora stato reso, sembra avere una dimensione di (23, 107) mentre dovrebbe essere qualcosa come (300, xxx) e una posizione di (0, 0).

C'è un modo per risolvere questo problema? magari rendere il popover fuori dallo schermo prima di misurarlo? se sì, come lo farei?

Grazie

Answer 1

fisso nella prossima v3.2.0 Bootstrap credo: http://jsfiddle.net/pkP77/1/

Per gentile concessione della nuova funzionalità introdotta in viewporthttps://github.com/twbs/bootstrap/pull/12328

Answer 2

È sempre possibile sostituire il valore top del popover utilizzando !important Questo potrebbe non essere il miglior piano di lungo termine in quanto potrebbe interferire con il futuro CSS cambia

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

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

Aggiornamento:

Uscendo dall'evento si m considerato questo sembra funzionare.

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

Questo allinea la freccia con il pulsante.