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

Answer 3

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

Answer 4

I was having issues with the popover going above so I couldn't see it. This fixed it for me

// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
  var arrow_position = parseInt($(this).position().top);
  $('.popover').css('top', 10 + 'px');
  $('.popover .arrow').css('top', arrow_position + 'px');
}

Answer 5

It will provide exact position to ur arrow

 $(el).on('shown.bs.popover', function () {
    var position = parseInt($('.popover').position().top);
    var pos2 = parseInt($(el).position().top) - 5;
    var x = pos2 - position + 5;
     if (popoverheight < x)
     x = popoverheight;
     $('.popover.left .arrow').css('top', x + 'px');
    });