How to put form in popover using bootstrap framework?

Question

What I want to do is put a simple form in popover,Now my popover was working fine, but it's not working when I put the form inside the popover.

here is my output

here is my code

<a href="#" class="btn" rel="popover" data-placement="bottom" data-content="
<form class='form-horizontal'>
<div class='control-group'>
<label class='control-label' for='inputEmail'>Start Date</label>
<div class='controls'>

<input type='text' class='span3 ' name='start_date' id='start_date' placeholder='News Date' value='<?php echo date('d-m-Y'); ?>' >
</div>
</div>
<div class='control-group'>
<label class='control-label' for='inputEmail'>End Date</label>
<div class='controls'>
<input type='text' id='end_date' name='end_date' placeholder='End Date' class='input-xlarge uneditable-input'>
</div>
</div>
</form>" title="Popover on bottom">         
</a>

here is the url who teach me did something like this Contain form within a bootstrap popover?

my bootstrap version was 2.2.2, any idea how to solve my problem? thanks

Answer 1

You can set data-html="true" on the <a> tag that contains the popover

Answer 2

check out this jsfiddle, i used 3 simple buttons: here

i copyed my html code in a jquery variable:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'  

it works fine even if you remove html: true,