Dynamically change the location of the popover depending upon where it displays

Question

I\'d like to dynamically change the popover placement (left/right, top/bottom) depending on where the element is located on the screen.

Answer 1

I just checked the bootstrap source again and realised that functions passed to the placement property get passed arguments. I managed to achieve a similar thing to what you were attempting, try the following and see if it works for you:

$('a[data-rel=popover]').popover({
  offset: 10,
  placement: get_popover_placement
});

function get_popover_placement(pop, dom_el) {
  // your placement function code here
}

Answer 2

Try this change, using the .on() function in jQuery to attach an event listener:

Changed this reply by updating Kevin Ansfield's - added code to the placement function.

    $('a[data-rel=popover]').popover({
      placement: get_popover_placement
    });

    function get_popover_placement(pop, dom_el) {
      var width = window.innerWidth;
      if (width<500) return 'bottom';
      var left_pos = $(dom_el).offset().left;
      if (width - left_pos > 400) return 'right';
      return 'left';
    }