Bootstrap - popover inside a popover

Question

I'm attempting to put a bootstrap popover inside another popover. The first popup functions correctly (opens and has the HTML content specified) but the second, while opening properly seems to not have any of the settings I set enabled (html:true, trigger:'manual', or the html content). See the demo below:

Fiddle

<div>
<a href="#" id="popover1" data-original-title="<b>testing</b>" data-placement="bottom">Click</a>

<div id="popover_content_wrapper1" style="display: none">
    <a href="#" id="popover2" data-original-title="<b>testing again</b>" data-placement="bottom">Click again</a>
</div>

<div id="popover_content_wrapper2" style="display: none">
    <b>Hello world</b>
</div>
</div>

$('#popover1').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper1').html();
    }
});

$(document).on('click', '#popover1', function() {
    $(this).popover('toggle');
});

$('#popover2').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper2').html();
    }
});

$(document).on('click', '#popover2', function() {
    $(this).popover('toggle');
});

I'd appreciate any tips/help.

Thanks!

Answer 1

That happens because at the time you initialize #popover2 , it still doesn't "exists". It will only exists once the #popover1 is toggled.

So, you have to initialize it every time you toggle #popover1 , because when it hides, it is removed from DOM (children included)

$(document).on('click', '#popover1', function() {
    $(this).popover('toggle');
    $('#popover2').popover({
        html: true,
        trigger: 'manual',
        content: function() {
            return $('#popover_content_wrapper2').html();
        }
    });
});

http://jsfiddle.net/kg7nyo6e/1/

Answer 2

As bootstrap does not support popover inside a popover, I have initialised popover inside the content of the first popover. You can simply add following javascript code in the first popover content as follows.

<script>
    jQuery(function () {
        jQuery('[data-toggle="popover"]').popover();
    });
</script>

Hope it can help.