bootstrap popover content change

Question

I'm trying to change the data-content of bootstrap popovers based on the content of a certain div elsewhere.

In the HTML, my popover trigger looks like this:

     <div id="box1"
        class="text-success" data-container="body"
        data-html="true"
        data-trigger="click"
        data-toggle="popover" data-placement="bottom"
        data-content="Get more info at <a href='http://example.com'>this link</a>."<br>
        <div id="box1Label" title="Click for more">Another Label</div>
        </div>

I call the popovers like this (JQuery):

var pop = $('[data-toggle="popover"]'); 
    $(pop).popover();
    $(pop).on('click', function (e) {
    $(pop).not(this).popover('hide');
    if ($('#panel2Head').html()== 'XXX') {
    alert('okay yes panel2Head html is XXX');
    popover.options.content = "Test Changed Content";
    }   
});

The alert confirms that it's reading #panel2Head and that #panel2Head contains "XXX", but the next line should in theory change the popover content from "Get more info..." to "Test Changed Content", and it doesn't.

That's one of the things I've read anyway, here for example.

The popovers work perfectly otherwise, they just always have that content hard-wired into data-content in the HTML.

I've tried 'pop.options.content = "Test Changed Content";' also

If anyone has suggestions much appreciated.

EDIT:

It seemed to be a problem of timing, that is, you have to grab the popover content after it's loaded. I found a solution in the second answer here , with some modification we came up with this which works:

var pop = $('[data-toggle="popover"]'); 
$(pop).popover();
$(pop).on('click', function (e) {
    $(pop).not(this).popover('hide');

});
$(pop).on('shown.bs.popover', function(e) {
    if ($('#panel2Head').html()== 'XXX') {
        var id = $(e.target).attr('aria-describedby');
        $('#'+id).html('<p><b>My New Popover Content</b></p>');         
    }
});

Answer 1

This works:

$(pop).on('shown.bs.popover', function(e) {
if ($('#panel2Head').html()== 'XXX') {
    var id = $(e.target).attr('aria-describedby');
    $('#'+id).html('<p><b>My New Popover Content</b></p>');         
  }
});

Answer 2

If you want to change some data, you can see https://stackoverflow.com/a/44475697/1622945 (with template option).

If you want to load html page in popover, you can try this:

var hoverTimeout;

$('[data-toggle="popover"]').hover(function() {
    var _this = $(this);

    hoverTimeout = setTimeout(function() {
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            success: function(dialog) {
                if($(".popover:hover").length != 0) {
                    $(".profile").popover("destroy");
                }
                _this.popover({
                    container: 'body',
                    placement: 'auto',
                    trigger: 'manual',
                    html: true,
                    content: dialog
                }).on("mouseout", function () {
                    setTimeout(function () {
                        if(!$(".popover:hover").length) {
                            $(".popover").popover("destroy");
                        }
                    }, 300);
                });
                _this.popover('show');
                setTimeout(function() {
                    $('.popover-content').on("mouseleave", function () {
                        $(".popover").popover("destroy");
                    });
                }, 300);
            },
        });
    }, 300);
}, function() {
    clearTimeout(hoverTimeout);
});