¿Es posible cambiar la posición de los popovers de Bootstrap según el ancho de la pantalla?

Question

Tengo una lista de elementos, y cada uno tiene un popover Bootstrap asociado (docs here). Se inician así:

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

Esto funciona, pero en pequeñas anchuras de la popover está perdido desde el puerto de vista. Me gustaría hacer la ubicación condicional basada en $(document).width();, sin embargo, no veo una manera de anular las opciones iniciales (por ejemplo, en un ancho de alrededor de 1000px, cambie la ubicación a 'arriba').

He creado una versión simplificada at jsfiddle here. Muchas gracias.

Answer 1

colocación también puede tomar una función como su valor. En esta función, puede devolver el valor apropiado según el ancho de la ventana gráfica. Por ej.

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

Answer 2

Su colocación cambio de izquierda a arriba en la ventana más pequeña que 768

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