Bootstrap 3 Popover arrow and box positioning

Question

I am using Bootstrap 3 popovers to display information about a link on hover, before clicking the link.

It's currently working at the moment, however, The links are displayed from a dropdown menu at the top of the page.

When the first link has a lot of information about it, the top of the popover disappears at the top of the page, so you cannot see the content of it.

I am trying to make it so that the popover arrow appears at the top-left of the popover(as opposed to middle-left which it is doing now) and the top of the popover box is level with the arrow if that makes sense.

$('.popOver').popover({
    trigger: 'hover',
    html: true
});

This above is working fine but I don't believe any popover options are able to help me here. Its the CSS I need to change but it's rather extensive to post, so I was just looking for someone with knowledge of bootstrap to point me in the right direction.

Answer 1

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

Answer 2

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';
  },
});