I've got a button in a table which should toggle a popover. I have set the data-container="body" as well as I have tried it with the javascript version.

My popover looks like this: (I have clicked the first button)

My button code is here:

<button id="testsettracesBtn1" class="btn btn-large btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</button>

And here my javascript:

<script type="text/javascript">
      $("#testsettracesBtn1").popover({ container: 'body'});
</script>

How can i achieve it to place my popover right? (And yes I have the newest bootstrap version.)

I've got a button in a table which should toggle a popover. I have set the data-container="body" as well as I have tried it with the javascript version.

My popover looks like this: (I have clicked the first button)

My button code is here:

<button id="testsettracesBtn1" class="btn btn-large btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</button>

And here my javascript:

<script type="text/javascript">
      $("#testsettracesBtn1").popover({ container: 'body'});
</script>

How can i achieve it to place my popover right? (And yes I have the newest bootstrap version.)

• javascript
• html
• twitter-bootstrap

• Try adding a jsfiddle.net to your question. And define right. Is it not centered right middle enough? Or is it currently on top? – Wouter van der Houven Commented Jun 25, 2013 at 12:47
• I created a JsFiddle, but it won't reproduce on jsfiddle: jsfiddle.net/x58uM/1. With right i mean: right of the button and vertically centered on the button. – philm5 Commented Jun 25, 2013 at 13:10
• Well if the same code works in jsfiddle but not in your file, the problem is most likely outside of the code. JS include order maybe? Or your CSS could throw the styles off. – Wouter van der Houven Commented Jun 25, 2013 at 13:14
• Okay, thank you. I found my problem. It's a select within a span. I used this to color specific statuses. Look here: jsfiddle.net/x58uM/2. Do i have to think about a different "coloring" method or can I continue using the badge? – philm5 Commented Jun 25, 2013 at 13:37
• Thats what a div is for ;) – Wouter van der Houven Commented Jun 25, 2013 at 13:42

2 Answers 2

I had the same problem, but the source of the bug was that my Bootstrap framework was outdated. I upgraded to 2.3.2 and the container: 'body' attribute started working.

It caused me quite a headache... until I found out the problem was not in my own code!

This strange behaviour is caused because of many select elements in within my table. I don't know why? I just changed the width of the popover to max-width, after the button is being clicked. With the correct width also the arrow is positioned right:

$(document).ready(function(){    
    $("[id^=kommentareBtn-]").popover({ container: 'body', placement: 'bottom', html: true });

    //this fixed my problem...
    $("[id^=kommentareBtn-]").click(function() {
      $(".popover").css("width", "276px");
    });
});