Bootstrap popover inside another div
<p>I have a boostrap row with two columns. The first column has some input controls. I want when I click some control to display a popover to the right in the second column.<br>
Ideally the arrow to be at the end of first column and title with content inside the second column. The width of popover must be the same with the second column.  </p>

<pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
        &lt;div class="form-group"&gt;
            &lt;input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 1" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "&gt;
            &lt;input class="form-control text-box single-line myClass" data-toggle="popover" data-trigger="focus" type="text" value="" data-title="Title 2" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
        I want popover to be displayed inside this. 
    &lt;/div&gt;

&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    $(function () {
        $(".myClass").popover({placement: 'right'});
    });
&lt;/script&gt;
</code></pre>