Почему Bootstrap popover получает squished, когда цель находится внутри прикрепленного контейнера?

Question

This jsfiddle говорит, что это лучше всего, но у меня есть триггер popover, который отлично работает. Однако, если я сделаю прикрепленный контейнер, popover получает хлюпание. Почему и как мне это исправить?

<script type="text/javascript"> 
$(function() { 
    $(".popover-trigger").popover({ 
     content: function() { 
      return $("#popover-content").html(); 
     } 
    }); 

    $(".btn").click(function(){ 
     var jq = $(".popover-trigger").parent().toggleClass("affix"); 
     var state = jq.hasClass("affix") ? "" : "not"; 
     $(".state").html(state); 
    }); 
}); 
</script> 
<div id="popover-content" class="hide">Lorem ipsum dolor sit amet ... </div> 
<div class="container"> 
    <div class="row"> 
     <div class="well"> 
      <div class="popover-trigger" data-trigger="hover" data-toggle="popover" data-original-title="Popover" data-html="true"> 
       I'm <span class="state">not</span> affixed. 
       <button class="btn">Toggle</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Не знаете, почему, но установка опции container popover исправила мою проблему, как показано на странице this fiddle.

Answer 2

Смотрите обновленный fiddle

Я не эксперт, но определение размера пирог в вашем CSS помогает гарантировать, что она сохраняет свою форму. Это делается путем вызова popover {height: x; width: y}.