Bootstrap 3 Popover arrow and box positioning

My use case is that the popover placement is top and I have to remove the arrow.

I followed the solution provided by @Skelly while I was using bootstrap 3.2.0. One problem is that the popover flash as the css property top is updated in the shown.bs.popover.

In fact, you can override the template property when initializing the popover and add some margin-top (margin-left if the placement is left/right) to it.

$('[data-toggle=popover]').popover({
  placement: 'top',
  template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

demo: http://www.bootply.com/gWwmO5XdbL

You can customize the placement of the popover or it's arrow my manipulating the .popover CSS once the popover is shown.

For example, this pushes the top of the popover down 22 pixels..

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

Working demo: http://bootply.com/88325

I recommend using the placement method rather than the shown.bs.popover event. This will not trigger a popover jump when the element is shown.

This is how it works:

$('[data-toggle=popover]').popover({
  placement: function(context, source) {
    var self = this;
    setTimeout(function() { 
      self.$arrow.css('top', 55);
      self.$tip.css('top', -45);
    }, 0);
    return 'right';
  },
});