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();
}
});
});
@SchweizerSchoggi
Copy link

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?

@krystyna93
Copy link

@SchweizerSchoggi were you able to figure that out?

@imliam
Copy link
Author

imliam commented Oct 18, 2018

There's another Gist here that covers that:

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

Copy link

ghost commented Nov 14, 2019

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

@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