Question

138

Bootstrap popover isn't placed correctly even with container: 'body' set

rated 0 times [ 143] [ 5] / answers: 1 / hits: 18418 / 11 Years ago, tue, june 25, 2013, 12:00:00

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)

enter

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristopherw

Add To Favorites

Follow

Total Points: 173

Total Questions: 107

Total Answers: 98

Location: Lesotho

Member since Wed, Jun 2, 2021

3 Years ago

answered 11 Years ago benitoh · Accepted Answer

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);

    });

});