Eu colocaria meu formulário na marcação e não em alguma tag de dados. É assim que poderia funcionar:
Código JS:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
Marcação 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>
Demo
Abordagens alternativas:
X-Editável
Você pode querer dar uma olhada em X-Editable . Uma biblioteca que permite criar elementos editáveis em sua página com base em popovers.
Webcomponents
Mike Costello lançou o Bootstrap Web Components . Esta biblioteca bacana tem um componente Popovers que permite incorporar o formulário como marcação:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Demo