Я б розмістив свою форму в розмітці, а не в якомусь тегу даних. Ось як це могло працювати:
Код JS:
$('#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">
<!-- MyForm -->
</div>
Демо
Альтернативні підходи:
X-Editable
Можливо, ви захочете поглянути на X-Editable . Бібліотека, яка дозволяє створювати на вашій сторінці редаговані елементи на основі показників.
Веб-компоненти
Майк Костелло випустив веб-компоненти Bootstrap . Ця чудова бібліотека має компонент Popovers, який дозволяє вставляти форму як розмітку:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Демо