I am trying to update the HTML content of a popup from popper.js
with html content coming back in ajax from the server.
The popup is created on page load. In the HTML :
<a id="upvote-637" title="Popup"
data-toggle="popover"
data-content="<ul><li>item 1</li><li>Item 2</li></ul>"
data-remote="true"
href="/posts/637/upvote">
Link text
</a>
In the Javascript :
$('[data-toggle="popover"]').popover({
trigger: 'hover',
html: true
});
I would like to update the content dynamically. I tried :
// This is working to Toggle display
$("#upvote-637").popover('toggle')
// This is not working to update the content dynamically
$("#upvote-637").popover('toggle')[0].dataset.content = "TEST";
You could use Tippy.js which uses Popper.js as its core engine, just like Tooltip.js does.
With Tippy.js it's easier (it was built to easily load data via ajax ):
tippy('#ajax-tippy', {
content: 'Loading...',
animateFill: false,
animation: 'fade',
flipOnUpdate: true,
onShow(instance) {
// call ajax; then use instance.setContent(responseText);
},
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.