Contain form within a bootstrap popover?

Question

<div class="container">     <div class="row" style="padding-top: 240px;">         <a href="#" class="btn btn-large btn-primary" rel="popover"             data-content="<form><input type="text"/></form>"             data-placement="top" data-original-title="Fill in form">Open form</a>     </div> </div> 

JSfiddle

I'm guessing that I would store the form contents within a javascript function...

How do I contain a form within a bootstrap popover?

Answer 1

I would put my form into the markup and not into some data tag. This is how it could work:

JS Code:

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

HTML Markup:

<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

Alternative Approaches:

X-Editable

You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.

Webcomponents

Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>  <bs-popover title="Popover with Title" for="popover-target">   <!-- MyForm --> </bs-popover> 

Demo