[解決済み] TwitterのPopoverでdivをコンテンツとして使用することは可能ですか？

質問

twitterのbootstrapのpopoverを使用しています。 ここで . 今現在、ポップオーバーのテキストの上にスクロールすると、ポップオーバーは <a> 's data-content 属性があります。 どうにかして <div> ポップオーバーの中にあります。 潜在的に、私はそこにphpとmysqlを使いたいのですが、もしdivを動作させることができれば、私は残りの部分を理解することができると思います。私はdata-contentに div IDがうまくいきません。

HTMLです。

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

解決方法は？

まず、コンテンツ内でHTMLを使用したい場合は、HTMLオプションをtrueに設定する必要があります。

$('.danger').popover({ html : true});

次に、Popoverのコンテンツを設定するための2つのオプションがあります。

• data-content属性を使用します。これはデフォルトのオプションです。
• HTMLコンテンツを返すカスタムJS関数を使用します。

data-contentを使用する : HTMLの内容をエスケープする必要があります、こんな感じです。

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

HTMLを手動でエスケープするか、関数を使用するかのどちらかです。PHPは知りませんが、Railsでは*html_safe*を使っています。

JSの関数を使用する : これを行う場合、いくつかのオプションがあります。一番簡単なのは、div のコンテンツを好きな場所に隠して、そのコンテンツを popover に渡す関数を書くことだと思います。このようなものです。

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

そうすると、HTMLは次のようになります。

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

お役に立てれば幸いです。

追記：popoverを使用する際、title属性を設定しないとトラブルが発生したことがあります...なので、必ずtitleを設定することを忘れないでください。