我正在尝试用从服务器返回的ajax中的HTML内容更新popper.js
弹出窗口的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>
在Javascript中:
$('[data-toggle="popover"]').popover({
trigger: 'hover',
html: true
});
我想动态更新内容。我试过了:
// 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";
您可以使用Tippy.js,它使用Popper.js作为核心引擎,就像Tooltip.js一样。
使用Tippy.js更容易(它是为了通过ajax轻松加载数据而构建的(:
tippy('#ajax-tippy', {
content: 'Loading...',
animateFill: false,
animation: 'fade',
flipOnUpdate: true,
onShow(instance) {
// call ajax; then use instance.setContent(responseText);
},
})