Twitter Bootstrap's javascript Popover looking wrong

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 Ipsu开发者_如何学运维m">Save Changes</a>

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

Any clue as to what's causing this?

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.

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;
    ...
  }

It's a margin thing, add

.popover .content {
margin: 0;
}

this should fix your problem.

The more universal fix is to add data-container='body' to the element to stop it from inheriting css rules from (and through) the element.