Change popover position when affix

Question

What I want to do is when affix is set I want to change the popover position to bottom what I did is this:

 $('.gallery-holder').on('affix.bs.affix', function (e) {
  console.log('check');

  $(this).find('.popover').popover({
     placement: 'bottom'
  });
})

The check works perfect but the position of the popover in .gallery-holder is not changing its position

and this is the html:

 <div class="gallery-holder affix">
    <label class="price-label">
                    All-in prijs
      <span class="material-icons" data-content="
          <ul class='list-checked'>
              <li>Basishuursom</li>
              <li>Reserveringskosten</li>
              <li>Eindschoonmaak</li>
              <li>Lokale heffingen</li>
          </ul>
          <p>Boek je een vakantiehuis of vakantietent?</p>
          <p>Ontvang gratis de <a href='/vakantiepark/park/attractiepas'>AttractiePas</a>!</p>
                        " data-placement="auto top" data-toggle="popover" data-trigger="focus" tabindex="0" title="" data-original-title="Alle prijzen zijn inclusief:">
                        help
      </span>
   </label>
</div>

here is a LINK to a bootlpy, as you can see it is triggered to a top placement and it stays at top when the affix.bs.affix is triggered

Answer 1

You can dynamically assign the position of a popover simply and reliably using the function call built into the placement option. Every time the popover is triggered, you can evaluate the status of the navbar (fixed or not) and then make the relevant assignment of top or bottom .

With reference to the Bootply you posted, this is the only JavaScript needed:

$('[data-toggle=popover]').popover({placement: function() {
        if($('.navbar-inverse').hasClass('affix-top')) {
            // console.log('top');                    
            return 'top';
        }
        else {
            // console.log('bottom');
            return 'bottom';
        }
    }                
});

You can find a working example here: http://www.bootply.com/dNDj85TQVg .

Please note that when you're handling a popover in this way, you should target the initialising element and not the popover itself (so not .popover , which Bootstrap adds dynamically). For this example I used the data-toggle attribute, but in cases where you may end up with more than one popover, an ID or class would be more suitable as a selector.