Last active
May 16, 2022 06:19
-
-
Save imliam/5e64bc4b2cea6b19f95ecc67602aa363 to your computer and use it in GitHub Desktop.
Bootstrap 4 - Load Popover Content From DOM
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
|-------------------------------------------------------------------------- | |
| 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 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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?