Bootstrap 3 Popover arrow and box positioning

javascript jquery css twitter-bootstrap-3 popover
Shamrockonov picture Shamrockonov · Oct 17, 2013 · Viewed 40.1k times · Source

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

Zim picture Zim · Oct 17, 2013

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

Related questions

Bootstrap modal: background jumps to top on toggle

I have a problem, with a modal. I have a button on a page, that toggles the modal. When the modal shows up, the page jumps to top. I have done everything I could to find a solution/etc, but …

Read More
bootstrap-multiselect options too long, overruns container

I am using David Stutz's Bootstrap-Mutliselect. I have used the following code to hook it up to all the select elements in my page: $(function () { $("select").multiselect( { enableFiltering: true }, { maxHeight: 5 }, { multiple: false } ); $("[multiple]").multiselect( { enableFiltering: true }, { maxHeight: 5 }, { enableCaseInsensitiveFiltering: true } ); }); The …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More