CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
joshendy
joshendy

Reputation: 33

Bootstrap - popover inside a popover

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!

Upvotes: 2

Views: 3435

Answers (2)

user1012513
user1012513

Reputation: 2365

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.

Upvotes: 0

Yuri
Yuri

Reputation: 3284

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/

Upvotes: 3

Related Questions