[解決済み】Twitter Bootstrapのポップオーバー内のHTML

質問

ブートストラップのポップオーバーの中にHTMLを表示しようとしているのですが、なぜかうまくいきません。ここでいくつかの答えを見つけましたが、私にはうまくいきません。何か間違ったことをしているのであれば教えてください。

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

解決方法は？

を使用することはできません。 <li href="#" に属しているため <a href="#" ということで、うまくいかなかったのですが、これを変更すればすべて解決です。

以下は動作中です。 JSFiddle で、ブートストラップポップオーバーの作成方法を紹介しています。

コードの関連箇所は以下の通りです。

HTMLです。

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScriptです。

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

ちなみに、必ず最低でも $("[data-toggle=popover]").popover(); を使用して、ポップオーバーを有効にします。しかし、その代わりに data-toggle="popover" を使用することもできます。 id="my-popover" または class="my-popover" . を使用して有効にすることを忘れないでください。 $("#my-popover").popover(); のような場合です。

以下は、仕様書の全文へのリンクです。 ブートストラップポップオーバー

ボーナス

もし、何らかの理由で data-content と title タグを使用します。また、hidden divsなどを使って、もう少しJavaScriptを使うこともできます。ここでは 例 についてです。