Shamrockonov Shamrockonov - 1 year ago 196
jQuery Question

Bootstrap Popover arrow and box positioning

I am using Bootstrap 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 alot 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.

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 its rather extensive to post, so I was just looking for some one with knowledge of bootstrap to point me in the right direction.


Answer Source

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('', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')

Working demo:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download