È possibile modificare la posizione dei popover Bootstrap in base alla larghezza dello schermo?

Question

Ho un elenco di elementi e ad ognuno di essi è associato un popover Bootstrap (docs here). Sono avviati in questo modo:

$('#my_list li').popover({ 
    placement: 'left' 
}); 

Questo funziona, ma a piccole larghezze il popover viene perso dal viewport. Mi piacerebbe rendere il posizionamento condizionale basato su $(document).width();, tuttavia non riesco a vedere un modo per superare le opzioni iniziali (ad esempio a una larghezza di circa 1000px, passare il posizionamento a 'sopra').

Ho creato una versione semplificata at jsfiddle here. Grazie molto.

Answer 1

Il posizionamento può anche assumere una funzione come valore. In questa funzione è possibile restituire il valore appropriato in base alla larghezza della vista. Per es.

$(document).ready(function(){ 
    $('#my_list li').popover({ 
     placement: wheretoplace 
    }); 
}); 
function wheretoplace(){ 
    var width = window.innerWidth; 
    if (width<500) return 'bottom'; 
    return 'left'; 
} 

Answer 2

sua collocazione cambiamento da sinistra in alto sulla finestra più piccola di 768

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}