まず、コンテンツ内でHTMLを使用する場合は、HTMLオプションをtrueに設定する必要があります。
$('.danger').popover({ html : true});
次に、ポップオーバーのコンテンツを設定する2つのオプションがあります
- data-content属性を使用します。これがデフォルトのオプションです。
- HTMLコンテンツを返すカスタムJS関数を使用します。
data-contentの使用:次のようなHTMLコンテンツをエスケープする必要があります。
<a class='danger' data-placement='above'
data-content="<div>This is your div content</div>"
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>
それが役に立てば幸い!
PS:popoverを使用していて、title属性を設定していないときに問題が発生したので、常にタイトルを設定してください。