Is it possible to change the position of Bootstrap popovers based on screen width?

Question

I have a list of items, and each one has a Bootstrap popover associated with it (docs here). They are initiated like this:

$(\'#my_list li\').popover({
   pl         


        

Answer 1

Its change placement from left to top on window smaller than 768

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

Answer 2

placement can also take a function as its value. In this function you can return the appropriate value based on width of viewport. For eg.

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