Bootstrap 4 - Load Popover Content From DOM

popover-dom-content.html

<div id="unique-id" style="display:none;">
    <div class="popover-heading">This is a heading</div>
    <div class="popover-body">This is HTML content that will be loaded inside a </div>
</div>

<span tabindex="0" role="button" data-toggle="popover" data-placement="bottom" data-popover-content="#unique-id">
    Click me to load a popover
</span>

popover-dom-content.js

/*
|--------------------------------------------------------------------------
| Bootstrap 4 - Load Popover Content From DOM
|--------------------------------------------------------------------------
|
| A quick JavaScript snippet that lets you dynamically load the content of
| a Bootstrap 4 popover from another HTML element in the DOM by making use
| of a data-popover-content attribute to reference a selector.
|
*/

$(function(){
    
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        },
        title: function() {
            var title = $(this).attr("data-popover-content");
            return $(title).children(".popover-heading").html();
        }
    });
    
});

I have multiple buttons that will be used to display a popover. How can I make them dismiss as soon as another one (or even the body) is being clicked?

@SchweizerSchoggi were you able to figure that out?

There's another Gist here that covers that:

https://gist.github.com/ImLiam/06e0bb4d6d7485cd0fb4eab3ca096d86

Thanks you so much for this. This worked for me.

This method is perfect if you want to keep data persistent. I had the scenario where I had a popover with checkboxes in it. Using the "data-content" HTML attribute doesn't store the previous state of the checkbox. This ensures changes are persisted.