Twitter Bootstrap's javascript Popover looking wrong

Question

I'm trying to implement Bootstrap JS's Popover (this), and for some reason it's not showing up like it's supposed to.

This is what I'm getting

As you can see, the body of the Popover is shifted towards the left, and the border's kinda broken.

Here's my code

<a class="btn success" id="previewBeforeSubmit"  href="#"
 data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>

<script type="text/javascript">
   $("#previewBeforeSubmit").popover({position: 10, placement: 'above'});
</script>

Any clue as to what's causing this?

Answer 1

Most likely a CSS conflict. Your existing css rules might be adding attributes to the ones of the popover. I would start with an inspection in FireBug and see what css rules are inherited from where.

Answer 2

I guess you are using their container example. If yes, you can fix this problem by comment out line margin: 0 -20px. It appears in the following block:

  .content {
    background-color: #fff;
    padding: 20px;
    margin: 0 -20px;
    ...
  }