html - ブートストラップ 3 のポップオーバー内にフォームを配置しますか?

Question

ブートストラップ3のポップオーバー内にフォームを配置するには?

<a href="#" class="btn btn-lg 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 It !</a>

次のような効果があります。

フォームをボディ内に配置したい。どうすればできますか？

Answer 1

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

ポップオーバー HTML マークアップ:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
  <form>
    <!-- my form -->
  </form>
</div>

Answer 2

次のようにポップオーバーにコンテンツを追加します。

$('#your-poped').popover({
  content: '<div id="preview"></div>',
  html: true,
  trigger: 'manual',
  delay: {'show':1000, 'hide':250},
});
$('#preview').html(yourdata);