Skip to content

Instantly share code, notes, and snippets.

@imliam
Last active May 16, 2022 06:19
Show Gist options
  • Save imliam/5e64bc4b2cea6b19f95ecc67602aa363 to your computer and use it in GitHub Desktop.
Save imliam/5e64bc4b2cea6b19f95ecc67602aa363 to your computer and use it in GitHub Desktop.
Bootstrap 4 - Load Popover Content From DOM
<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>
/*
|--------------------------------------------------------------------------
| 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();
}
});
});
@eversionsystems
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment