Search code examples
javascriptpopovertwitter-bootstrap

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 Ipsum">Save Changes</a>

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

Any clue as to what's causing this?

Solution

  • 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.