[英]Bootstrap 4 Popper.js : How to dynamically update the content of the popup?
I am trying to update the HTML content of a popup from popper.js
with html content coming back in ajax from the server. 我正在尝试使用来自服务器的Ajax返回的html内容更新来自
popper.js
的弹出popper.js
的HTML内容。
The popup is created on page load. 弹出页面是在页面加载时创建的。 In the HTML :
在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 : 在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. 您可以使用Tippy.js,它使用Popper.js作为其核心引擎,就像Tooltip.js一样。
With Tippy.js it's easier (it was built to easily load data via ajax ): 使用Tippy.js更加容易(它被构建为通过ajax轻松加载数据 ):
tippy('#ajax-tippy', {
content: 'Loading...',
animateFill: false,
animation: 'fade',
flipOnUpdate: true,
onShow(instance) {
// call ajax; then use instance.setContent(responseText);
},
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.